¿Puedo evitar que el texto en un bloque div se desborde?

Question

¿Puedo evitar que el texto en un bloque div se desborde?

Answer 1

que puede probar:

<div id="myDiv"> 
    stuff 
</div> 

#myDiv { 
    overflow:hidden; 
} 

Salida the docs for the overflow property para más información.

Answer 2

overflow: scroll? O auto. en el atributo de estilo.

Answer 3

Sí. Puede utilizar CSS - Hay un montón de valores que puede utilizar ..

http://www.w3schools.com/Css/pr_pos_overflow.asp

inkedmm es correcto, que podría ser el comportamiento que desea, pero debe determinar si ese es el caso.

Answer 4

.NonOverflow 
{ 
    width: 200px; /* Need the width for this to work */ 
    overflow: hidden; 
} 

<div class="NonOverflow"> 
    Long Text 
</div> 

Answer 5

Se puede controlar con CSS, hay un par de opciones:

• Ocultos -> se ocultará Todo desbordamiento de texto.
• visible -> Deje visible el desbordamiento del texto.
• de desplazamiento -> barras de venta de desplazamiento si el texto se desborda

espero que ayude.

Answer 6

Si su div tiene una altura de ajuste en CSS que hará que se desborde fuera de la div.

Puede dar a div una altura mínima si necesita tener una altura mínima en el div en todo momento.

Min-altura no funcionará en IE6 sin embargo, si usted tiene una hoja de estilo IE6 específica puede darle una altura regular para IE6. La altura cambia en IE6 según el contenido dentro de.

Answer 7

Si desea que el texto que desborda en el div a salto de línea automáticamente en lugar de estar escondido o hacer una barra de desplazamiento, utilice la propiedad

word-wrap: break-word

.

Answer 8

hay otra propiedad CSS:

white-space : normal; 

Los controles de propiedades de espacio en blanco cómo se manipula el texto en el elemento que se aplica.

div { 

    /* This is the default, you don't need to 
    explicitly declare it unless overriding 
    another declaration */ 
    white-space: normal; 

} 

Answer 9

Puede usar el desbordamiento de texto de la propiedad CSS para truncar textos largos.

<div id="greetings"> 
    Hello universe! 
</div> 

#greetings 
{ 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; // This is where the magic happens 
} 

referencia: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Answer 10

Utilice simplemente este:

white-space: pre-wrap;  /* CSS3 */ 
    white-space: -moz-pre-wrap; /* Firefox */  
    white-space: -pre-wrap;  /* Opera <7 */ 
    white-space: -o-pre-wrap; /* Opera 7 */  
    word-wrap: break-word;  /* IE */ 

Answer 11

Trate de añadir esta clase con el fin de solucionar el problema:

.ellipsis { 
    text-overflow: ellipsis; 

    /* Required for text-overflow to do anything */ 
    white-space: nowrap; 
    overflow: hidden; 
} 

explica más adelante en este enlace http://css-tricks.com/almanac/properties/t/text-overflow/

Answer 12

Sólo puede establecer el ancho de minutos en el CSS, por ejemplo:

.someClass{min-width: 980px;} 

No va a romper, sin embargo, de todas maneras tendrá la barra de desplazamiento de tratar.

Answer 13

recomendaciones sobre cómo atrapar a qué parte de la CSS está causando el problema:

1) juego style="height:auto;" en todos los elementos de <div> y vuelva a intentarlo de nuevo.

2) Establezca style="border: 3px solid red;" en todos los elementos <div> para ver qué área ocupa su caja <div>.

3) Elimine todas las propiedades css height:#px; de su CSS y comience nuevamente.

Así, por ejemplo:

<div id="I" style="height:auto;border: 3px solid red;">I 
    <div id="A" style="height:auto;border: 3px solid purple;">A 
     <div id="1A" style="height:auto;border: 3px solid green;">1A 
     </div> 
     <div id="2A" style="height:auto;border: 3px solid green;">2A 
     </div> 
    </div> 
    <div id="B" style="height:auto;border: 3px solid purple;">B 
     <div id="1B" style="height:auto;border: 3px solid green;">1B 
     </div> 
     <div id="2B" style="height:auto;border: 3px solid green;">2B 
     </div> 
    </div> 
</div>