A capo automatico CSS in div

Ho un div con una larghezza di 250px. Quando il testo interno è più ampio di quello, voglio che si rompa. Il div è float: a sinistra e ora ha un overflow. Voglio che la barra di scorrimento scompaia utilizzando il ritorno a capo automatico. Come posso raggiungere questo obiettivo?

<div id="Treeview">
<div id="HandboekBox">
    <div id="HandboekTitel">
        <asp:Label ID="lblManual" runat="server"></asp:Label>
    </div>
    <div id="HandboekClose">
        <asp:ImageButton ID="btnCloseManual" runat="server" 
            ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" 
            BorderWidth="0" ToolTip="Sluit handboek" />
    </div>
</div>
<asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode">
    <Nodes>

    </Nodes>
</asp:TreeView>
</div>

CSS:

#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}

Come ha detto Andrew, il tuo testo dovrebbe fare proprio questo.

C'è un caso a cui posso pensare che si comporterà nel modo che suggerisci, e cioè se hai impostato la proprietà dello spazio bianco.

Verifica se non hai quanto segue nel tuo CSS da qualche parte:

white-space: nowrap

Ciò farà sì che il testo continui sulla stessa riga finché non viene interrotto da un'interruzione di riga.

OK, mi scuso, non sono sicuro se modificato o aggiunto il mark-up in seguito (non l'ho visto all'inizio).

La proprietà overflow-x è ciò che fa apparire la barra di scorrimento. Rimuovilo e il div si adatterà all'altezza necessaria per contenere tutto il tuo testo.

O semplicemente usa

word-wrap: break-word;

supportato in IE 5.5+, Firefox 3.5+ e browser WebKit come Chrome e Safari.

try white-space:normal;Questo sovrascriverà l'ereditarietàwhite-space:nowrap;

È abbastanza difficile da dire in modo definitivo senza vedere come appare l'html renderizzato e quali stili vengono applicati agli elementi all'interno del div treeview, ma la cosa che mi salta subito all'occhio è il

overflow-x: scroll;

Cosa succede se lo rimuovi?

Puoi usare:

overflow-x: auto; 

Se imposti "auto" in overflow-x, lo scorrimento apparirà solo quando la dimensione interna è maggiore dell'area DIV

Sono un po 'sorpreso che non lo faccia solo. Potrebbe esserci un altro elemento all'interno del div che ha una larghezza impostata su qualcosa di maggiore di 250?

Impostando solo la larghezza e le proprietà css float otterrebbe un pannello di wrapping. L'esempio seguente funziona perfettamente:

<div style="float:left; width: 250px">
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam   ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam. 
</div>

Forse ci sono altri stili in atto che modificano l'aspetto?

Ho scoperto che ha word-wrap: anywherefunzionato (al contrario di quanto word-wrap: break-wordmenzionato in un'altra risposta).

Guarda anche:

Cosa significa "ovunque" nella proprietà CSS "a capo automatico"?