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

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

Si desea que el texto desbordado en el div se marque automáticamente en lugar de ocultarse o crear una barra de desplazamiento, use el

word-wrap: break-word

propiedad.

Puedes probar:

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

#myDiv {
    overflow:hidden;
}

Consulte los documentos de la propiedad de desbordamiento para obtener más información.

Puede usar la propiedad CSS text-overflow 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

Puede controlarlo con CSS, hay algunas opciones:

• oculto -> Todo el texto desbordado estará oculto.
• visible -> Deje que el texto se desborde visible.
• desplazarse -> poner barras de desplazamiento si el texto se desborda

Espero eso ayude.

Simplemente use esto:

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 */

hay otra propiedad css:

white-space : normal;

La propiedad de espacio en blanco controla cómo se maneja el texto en el elemento al que se aplica.

div {

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

}

Intente agregar esta clase para solucionar el problema:

.ellipsis {
  text-overflow: ellipsis;

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

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

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

Supongo que deberías comenzar con lo básico de w3

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Si su div tiene una altura establecida en css que hará que se desborde fuera del div.

Puede darle al div una altura mínima si necesita que sea una altura mínima en el div en todo momento.

Sin embargo, la altura mínima no funcionará en IE6, si tiene una hoja de estilo específica de IE6, puede darle una altura regular para IE6. La altura cambia en IE6 según el contenido que contiene.

Simplemente puede establecer el ancho mínimo en el CSS, por ejemplo:

.someClass{min-width: 980px;}

No se romperá, sin embargo, todavía tendrá que lidiar con la barra de desplazamiento.

Recomendaciones sobre cómo detectar qué parte de su CSS está causando el problema:

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

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

3) Quite todas las height:#px;propiedades CSS de su CSS y comience de nuevo.

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>

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

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

!! ¡ Tradoff codificado por delante! Dependiendo del código circundante y la resolución de la pantalla, esto podría conducir a un comportamiento diferente / no deseado

Si el desbordamiento oculto está fuera de discusión y se necesita un guión correcto, puede usar la entidad HTML de guión suave donde desea que se rompa la palabra / texto. De esta forma, puede predeterminar manualmente un punto de ruptura.

­

El guión solo aparecerá cuando la palabra deba romperse para no desbordar su contenedor circundante.

Ejemplo:

<div class="container">
  foo&shy;bar
</div>

Resultado si el contenedor es lo suficientemente ancho y el texto no lo desbordaría:

foobar

Resultado si el contenedor es demasiado pequeño y el texto realmente desbordaría el contenedor:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

Más información: https://en.wikipedia.org/wiki/Soft_hyphen