Ajuste de palabras CSS en div

Tengo un div con un ancho de 250px. Cuando el texto interno es más ancho que eso, quiero que se descomponga. El div es float: left y ahora tiene un desbordamiento. Quiero que la barra de desplazamiento desaparezca mediante el ajuste de palabras. ¿Cómo puedo conseguir esto?

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

Como dijo Andrew, su texto debería hacer precisamente eso.

Hay una instancia en la que puedo pensar que se comportará de la manera que sugieres, y es si tienes la propiedad de espacio en blanco configurada.

Vea si no tiene lo siguiente en su CSS en alguna parte:

white-space: nowrap

Eso hará que el texto continúe en la misma línea hasta que sea interrumpido por un salto de línea.

OK, mis disculpas, no estoy seguro de si editó o agregó el marcado después (no lo vi al principio).

La propiedad overflow-x es lo que hace que aparezca la barra de desplazamiento. Elimine eso y el div se ajustará tan alto como sea necesario para contener todo su texto.

O simplemente usa

word-wrap: break-word;

compatible con los navegadores IE 5.5+, Firefox 3.5+ y WebKit como Chrome y Safari.

intente white-space:normal;Esto anulará la herenciawhite-space:nowrap;

Es bastante difícil decirlo definitivamente sin ver cómo se ve el html renderizado y qué estilos se están aplicando a los elementos dentro del div de vista de árbol, pero lo que me llama la atención de inmediato es el

overflow-x: scroll;

¿Qué pasa si quitas eso?

puedes usar:

overflow-x: auto; 

Si configura 'auto' en overflow-x, el desplazamiento aparecerá solo cuando el tamaño interno sea mayor que el área DIV

Estoy un poco sorprendido de que no solo haga eso. ¿Podría haber otro elemento dentro del div que tenga un ancho establecido en algo mayor que 250?

Establecer solo las propiedades de ancho y flotante css obtendría un panel de envoltura. El siguiente ejemplo funciona 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>

¿Quizás existen otros estilos que modifican la apariencia?

Descubrí que word-wrap: anywherefuncionó (a diferencia de lo word-wrap: break-wordmencionado en otra respuesta).

Ver también:

¿Qué significa "en cualquier lugar" en la propiedad CSS de "ajuste de palabras"?