CSS-Zeilenumbruch in div

Ich habe ein Div mit einer Breite von 250px. Wenn der innere Text breiter ist, möchte ich, dass er zusammenbricht. Das div ist float: left und hat jetzt einen Überlauf. Ich möchte, dass die Bildlaufleiste durch Zeilenumbruch entfernt wird. Wie kann ich das erreichen?

<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;
}

Wie Andrew sagte, sollte Ihr Text genau das tun.

Es gibt eine Instanz, von der ich mir vorstellen kann, dass sie sich so verhält, wie Sie es vorschlagen, und zwar, wenn Sie die Whitespace-Eigenschaft festgelegt haben.

Überprüfen Sie, ob in Ihrem CSS irgendwo Folgendes nicht enthalten ist:

white-space: nowrap

Dadurch wird der Text in derselben Zeile fortgesetzt, bis er durch einen Zeilenumbruch unterbrochen wird.

OK, ich entschuldige mich, ich bin mir nicht sicher, ob ich das Markup danach bearbeitet oder hinzugefügt habe (habe es zuerst nicht gesehen).

Die Eigenschaft overflow-x bewirkt, dass die Bildlaufleiste angezeigt wird. Wenn Sie das entfernen, wird das div so hoch eingestellt, wie es sein muss, um Ihren gesamten Text zu enthalten.

Oder einfach benutzen

word-wrap: break-word;

Unterstützt in IE 5.5+, Firefox 3.5+ und WebKit-Browsern wie Chrome und Safari.

try white-space:normal;Dies überschreibt die Vererbungwhite-space:nowrap;

Es ist ziemlich schwer definitiv zu sagen, ohne zu sehen, wie das gerenderte HTML aussieht und welche Stile auf die Elemente innerhalb des Treeview-Div angewendet werden, aber das, was mir sofort auffällt, ist das

overflow-x: scroll;

Was passiert, wenn Sie das entfernen?

Sie können verwenden:

overflow-x: auto; 

Wenn Sie in overflow-x 'auto' einstellen, wird der Bildlauf nur angezeigt, wenn die innere Größe des DIV-Bereichs am größten ist

Ich bin ein wenig überrascht, dass es das nicht einfach macht. Könnte es ein anderes Element innerhalb des div geben, dessen Breite auf etwas größer als 250 eingestellt ist?

Wenn Sie nur die Eigenschaften width und float css festlegen, erhalten Sie ein Wrapping-Panel. Das folgende Beispiel funktioniert einwandfrei:

<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>

Vielleicht gibt es andere Stile, die das Erscheinungsbild verändern?

Ich fand das word-wrap: anywherefunktionierte (im Gegensatz zu einer word-wrap: break-wordanderen Antwort erwähnt).

Siehe auch:

Was bedeutet "überall" in der CSS-Eigenschaft "Zeilenumbruch"?