suspensivos - truncar texto css

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, tu texto debería estar haciendo exactamente eso.

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

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

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

Es bastante difícil decir de manera definitiva sin ver cómo se ve el html renderizado y qué estilos se están aplicando a los elementos dentro de la div treeview, pero lo que salta a la vista de inmediato es la

overflow-x: scroll;

¿Qué pasa si eliminas eso?

Answer 3

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

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

Answer 4

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 a 250?

Answer 5

O simplemente usa

word-wrap: break-word;

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

Answer 6

prueba white-space:normal; Esto anulará la herencia white-space:nowrap;

Answer 7

puedes usar:

overflow-x: auto; 

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