Emballage de mots CSS en div

J'ai un div avec une largeur de 250px. Lorsque le texte interne est plus large que cela, je veux qu'il se décompose. Le 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;
}

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

Il y a un exemple auquel je peux penser et qui se comportera de la manière que vous suggérez, et c'est si vous avez défini la propriété d'espace blanc.

Voyez si vous n'avez pas ce qui suit dans votre CSS quelque part:

white-space: nowrap

Cela entraînera le texte de continuer sur la même ligne jusqu'à ce qu'il soit interrompu par un saut de ligne.

OK, mes excuses, je ne sais pas si modifié ou ajouté le balisage par la suite (je ne l'ai pas vu au début).

La propriété overflow-x est ce qui fait apparaître la barre de défilement. Supprimez-le et le div s'ajustera à la hauteur nécessaire pour contenir tout votre texte.

Ou utilisez simplement

word-wrap: break-word;

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

essayez white-space:normal;Cela remplacera l'héritagewhite-space:nowrap;

Il est assez difficile de dire définitivement sans voir à quoi ressemble le html rendu et quels styles sont appliqués aux éléments dans le div treeview, mais ce qui me saute aux yeux tout de suite, c'est le

overflow-x: scroll;

Que se passe-t-il si vous supprimez cela?

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

Je suis un peu surpris que cela ne fasse pas que ça. Y a-t-il un autre élément à l'intérieur du div dont la largeur est supérieure à 250?

Définir uniquement les propriétés css width et float donnerait 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?

J'ai trouvé que cela word-wrap: anywherefonctionnait (par opposition à word-wrap: break-wordmentionné dans une autre réponse).

Voir également:

Que signifie "n'importe où" dans la propriété CSS "word-wrap"?