Ajuste de palabras CSS en div

100

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;
}
css html word-wrap Martijn
fuente

Respuestas:

110

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.

Jayx
fuente
Tienes razón. La vista de árbol es construida por Microsoft y cuando verifico la fuente, en todas partes se usa el espacio en blanco: nowrap
Martijn
Ah bueno. PhoneGap + jquery mobile da como resultado mucho estilo para clasificar. Añadiendo "espacio en blanco: normal; desbordamiento: automático;" eso me solucionó.
Michael Blankenship
2
pruebe white-space:normal;su elemento para anular la herencia white-space: nowrapde su padre
gordon
102

O simplemente usa 

word-wrap: break-word;

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

Jc Figueroa
fuente
19

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

Gordon
fuente
8

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?

Andrés
fuente
Luego, el texto sobrepasa el límite
Martijn
3

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

Tamil Selvan C
fuente
2

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?

Andrés
fuente
1

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?

Aleris
fuente
No funciona. En mi div uso hipervínculos. ¿Quizás eso tenga algo que ver con eso?
Martijn