web-dev-qa-db-fra.com

Habillage de mots CSS dans div

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 Word-wrapping. 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;
}
csshtmlword-wrap
97
Martijn

Comme Andrew l'a dit, votre texte devrait faire exactement cela.

Je peux penser à un cas qui se comportera de la manière que vous avez suggérée, à savoir si vous avez défini la propriété d'espace.

Voyez si vous n'avez pas quelque chose dans votre CSS quelque part:

white-space: nowrap

Cela fera en sorte que le texte continue sur la même ligne jusqu'à ce qu'il soit interrompu par un saut de ligne.

OK, mes excuses, pas sûr si édité ou ajouté la balise par la suite (ne l'a pas vu au début).

La propriété overflow-x est la cause de l'apparition de la barre de défilement. Supprimez cela et la div s'ajustera aussi haut que nécessaire pour contenir tout votre texte.

104
Jayx

Ou simplement utiliser

Word-wrap: break-Word;

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

100
Jc Figueroa

try white-space:normal; Ceci annulera l'héritage white-space:nowrap;

16
gordon

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?

7
Andrew

vous pouvez utiliser:

overflow-x: auto;

Si vous définissez 'auto' dans overflow-x, le défilement n'apparaîtra que lorsque la taille intérieure est la plus grande de la zone DIV

3
Yamil Bendek

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?

2
Andrew

Si vous définissez uniquement les propriétés css width et float, vous obtiendrez un panneau d'habillage. L'exemple suivant fonctionne très bien:

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

Peut-être y a-t-il d'autres styles en place qui modifient l'apparence?

1
Aleris