Habillage de mots CSS dans div

Question

J'ai un div avec une largeur de 250px. Quand le innertext est plus large que cela, je veux qu'il se décompose. La div est float: left et a maintenant un débordement. Je veux que la barre de défilement disparaisse en utilisant le retour à la ligne. Comment puis-je atteindre cet objectif?

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

Answer 1

Andrew dit, votre texte doit être en train de faire juste cela.

Il existe une instance qui, je pense, qui va se comporter dans le sens que vous suggérez, et c'est si vous avez l'espace bien défini.

Voir si vous n'avez pas les éléments suivants dans votre CSS quelque part:

white-space: nowrap

Que va entraîner le texte de continuer sur la même ligne jusqu'à ce interrompue par un saut de ligne.

OK, toutes mes excuses, vous ne savez pas si les modifier ou en ajouter le mark-up par la suite (ne l'avais pas vu au premier abord).

L'overflow-x est bien ce que l'origine de la barre de défilement apparaît. Retirer et que la div s'adapter à aussi haut que nécessaire pour contenir tout votre texte.

Answer 2

Ou simplement utiliser

 word-wrap: break-word;
 

pris en charge dans les navigateurs IE 5.5+, Firefox 3.5+ et WebKit tels que Chrome et Safari.

Answer 3

Il est assez difficile de dire définitivement sans voir à quoi ressemble le rendu HTML et quels styles sont appliqués aux éléments de la division treeview, mais la chose qui me saute aux yeux tout de suite est le

 overflow-x: scroll;
 

Qu'est-ce qui se passe si vous supprimez cela?

Answer 4

Je suis un peu surpris que cela ne se limite pas à cela. Pourrait-il y avoir un autre élément à l'intérieur de la div qui a une largeur définie à quelque chose supérieur à 250?