CSS-Zeilenumbruch in div

100

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;
}
css html word-wrap Martijn
quelle

Antworten:

110

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.

Jayx
quelle
Du hast recht. Die Baumansicht wird von Microsoft erstellt und wenn ich die Quelle überprüfe, wird überall Leerraum verwendet: nowrap wird verwendet
Martijn
Ah gut. PhoneGap + jquery mobile bietet viel Stil zum Durchsuchen. Durch Hinzufügen von "Leerraum: normal; Überlauf: automatisch;" das hat mich geklärt.
Michael Blankenship
2
Versuchen Sie white-space:normal;Ihr Element, um das Erben white-space: nowrapvon seinem Elternteil zu überschreiben
Gordon
102

Oder einfach benutzen 

word-wrap: break-word;

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

Jc Figueroa
quelle
19

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

Gordon
quelle
8

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?

Andrew
quelle
Dann geht der Text über die Grenze
Martijn
3

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

Tamil Selvan C.
quelle
2

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?

Andrew
quelle
1

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?

Aleris
quelle
Es funktioniert nicht. In meinem Div benutze ich Hyperlinks. Vielleicht hat das etwas damit zu tun?
Martijn