Envoltura de palabras CSS en div

Question

Tengo un div con un ancho de 250px. Cuando el texto interno es más ancho que el que quiero que se descomponga. El div es flotante: izquierda y ahora tiene un desbordamiento. Quiero que la barra de desplazamiento se vaya usando 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; 
} 

Answer 1

Como dijo Andrew, su texto debería estar haciendo exactamente eso.

Hay una instancia que puedo pensar que se comportará de la manera que sugiere, y eso es si usted tiene la propiedad de espacio en blanco establecida.

Vea si usted 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 se interrumpa por un salto de línea.

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

La propiedad overflow-x es lo que está causando que aparezca la barra de desplazamiento. Quítelo y el div se ajustará a todo lo que necesite para contener todo su texto.

Answer 2

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

Answer 3

Configurando solo el ancho y las propiedades float css obtendrían un panel de embalaje. El ejemplo folowing funcionan 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> 

Tal vez hay otros estilos en el lugar que modifican la apariencia?

Answer 4

Es bastante difícil decir definitivamente sin ver lo que el HTML representado Aspecto del producto y qué estilos se están aplicando a los elementos dentro de la div de árbol, pero lo que me salta a la derecha se encuentra el

overflow-x: scroll; 

¿Qué sucede si eliminas eso?

Answer 5

puede utilizar:

overflow-x: auto; 

Si ajusta 'Auto' en el desbordamiento-x, aparecerá de desplazamiento sólo cuando tamaño interno es más grande que el área DIV

Answer 6

o simplemente utilizar

word-wrap: break-word; 

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

Answer 7

tratar white-space:normal; Esto anulará heredar white-space:nowrap;