¿Cómo evitar que las palabras largas rompan mi div?

Dos correcciones:

1. overflow:scroll this esto asegura que su contenido se pueda ver a costa del diseño (las barras de desplazamiento son feas)
2. overflow:hidden cuts simplemente corta cualquier desbordamiento. Sin embargo, significa que la gente no puede leer el contenido.

Si (en el ejemplo SO) desea evitar que se superponga al relleno, probablemente tendrá que crear otro div, dentro del relleno, para contener su contenido.

Editar: Como el estado de otras respuestas, hay una variedad de métodos para truncar el palabras, ya sea resolviendo el ancho de renderizado en el lado del cliente (nunca intente hacer este lado del servidor ya que nunca funcionará de manera confiable, multiplataforma) a través de JS e insertando caracteres de corte, o usando etiquetas CSS no estándar y / o extremadamente incompatibles(word-wrap: break-word no parece funcionar en Firefox ).

Sin embargo, siempre necesitará un descriptor de desbordamiento. Si tu div contiene otro contenido de tipo bloque demasiado ancho (imagen, tabla, etc.), necesitarás desbordamiento para que no destruir la disposición / diseño.

Así que por todos los medios use otro método (o una combinación de ellos), pero recuerde agregar desbordamiento también para cubrir todos los navegadores.

Editar 2 (para abordar su comentario a continuación):

Empezar usando la propiedad CSS overflow no es perfecto, pero evita que los diseños se rompan. Aplicar overflow:hidden primero. Recuerde que el desbordamiento puede no romperse en el relleno, por lo que puede anidar divs o usar un borde (lo que funcione mejor para usted).

Esto ocultará el contenido desbordante y por lo tanto, podrías perder significado. Puede usar una barra de desplazamiento (usando overflow:auto o overflow:scroll en lugar de overflow:hidden), pero dependiendo de las dimensiones del div y su diseño, esto podría no verse o funcionar bien.

Para arreglarlo, podemos usar JS para retirar las cosas y hacer algún tipo de truncamiento automatizado. Estaba a mitad de camino escribiendo un pseudo código para ti pero se complica seriamente a mitad de camino. Si necesita mostrar tanto como sea posible, eche un vistazo a hyphenator ( como se indica a continuación).

Solo tenga en cuenta que esto viene a costa de las CPU del usuario. Podría resultar en que las páginas tardaran mucho tiempo en cargarse y / o redimensionarse.

Este es un problema complejo, como sabemos, y no es compatible de ninguna manera común entre los navegadores. La mayoría de los navegadores no admiten esta función de forma nativa.

En algunos trabajos realizados con correos electrónicos HTML, donde se estaba utilizando contenido de usuario, pero el script no está disponible (e incluso CSS no es compatible muy bien), el siguiente bit de CSS en un envoltorio alrededor de su bloque de contenido sin espacio debería al menos ayudar un poco:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

En el caso de los navegadores basados en Mozilla, el archivo XBL mencionado anteriormente contiene:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

Desafortunadamente, a Opera 8+ no parece gustarle ninguna de las soluciones anteriores, por lo que JavaScript tendrá que ser la solución para esos navegadores (como Mozilla/Firefox.) Otra solución cross-browser (JavaScript) que incluye las últimas ediciones de Opera sería utilizar el script de Hedger Wang que se encuentra aquí: http://www.hedgerwow.com/360/dhtml/css-word-break.html

Otros enlaces/pensamientos útiles:

Balbuceo incoherente "Blog Archive" Emulando CSS ajuste de palabra para Mozilla/Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Sin ajuste de línea en Opera, se muestra bien en IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-users/2004-November/024468.html

CSS Cross Browser Word Wrap

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Use el estilo word-break:break-all;. Sé que funciona en las mesas.

¿quiere usted decir que, en los navegadores que lo soportan, word-wrap: break-word no funciona ?

Si se incluye en la definición del cuerpo de la hoja de estilos, debería funcionar a lo largo de todo el documento.

Si el desbordamiento no es una buena solución, solo un javascript personalizado podría romper artificialmente la palabra larga.

Nota: también hay esto <wbr> Etiqueta de salto de palabra . Esto le da al navegador un lugar donde puede dividir la línea. Desafortunadamente, la etiqueta <wbr> no funciona en todos los navegadores, solo Firefox e Internet Explorer (y Opera con un truco CSS).

Acaba de comprobar IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows, y Safari:

word-wrap: break-word;

Funciona para enlaces largos dentro de un div con un ancho establecido y sin desbordamiento declarado en el css:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

No veo ningún problema de incompatibilidad

Acabo de encontrar división de palabras de esta pregunta. Eso podría resolver el problema.

Después de mucha lucha, esto es lo que funcionó para mí:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Funciona en las últimas versiones de Chrome, Firefox y Opera.

Tenga en cuenta que excluí muchas de las propiedades white-space que los otros sugirieron that que realmente rompieron la sangría pre para mí.

Para mí en un div sin tamaño fijo y con contenido dinámico funcionó usando:

display:table;
word-break:break-all;

Re la expresión regular en este comentario, es bueno, pero agrega el guion tímido solo entre grupos de 5 caracteres que no son espacios en blanco o guiones. Eso permite que el último grupo sea mucho más largo de lo previsto, ya que no hay ningún grupo coincidente después de él.

Por ejemplo, esto:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

...resultados en esto:

abcde­12345678901234

Aquí hay una versión que usa lookahead positivo para evitar ese problema:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

...con este resultado:

abcde­12345­67890­1234

La solución que suelo usar para este problema es establecer 2 reglas CSS diferentes para IE y otros navegadores:

word-wrap: break-word;

Woks perfecto en IE, pero word-wrap no es una propiedad CSS estándar. Es una propiedad específica de Microsoft y no funciona en Firefox.

Para Firefox, lo mejor que se puede hacer usando solo CSS es establecer la regla

overflow: hidden;

Para el elemento que contiene el texto que desea ajustar. No envuelve el texto, pero oculta la parte del texto que va sobre el límite del contenedor. Puede ser una buena solución si no es esencial que muestre todo el texto (es decir, si el texto está dentro de una etiqueta <a>)

Actualizar: Manejar esto en CSS es maravillosamente simple y de bajo costo, pero no tienes control sobre dónde se producen las interrupciones cuando lo hacen. Eso está bien si no le importa, o sus datos tienen carreras alfanuméricas largas sin interrupciones naturales. Teníamos un montón de rutas de archivo largas, URL y números de teléfono, todos los cuales tienen lugares en los que es significativamente mejor romper que otros.

Nuestra solución fue usar primero un reemplazo de expresiones regulares para poner un espacio de ancho cero () después de cada 15 (digamos) caracteres que no sean espacios en blanco o uno de los caracteres especiales donde preferiríamos los saltos. Luego hacemos otro reemplazo para poner un espacio de ancho cero después de esos caracteres especiales.

Los espacios de ancho cero son agradables, porque nunca son visibles en la pantalla; los guiones tímidos eran confusos cuando se mostraban, porque los datos tienen guiones significativos. Los espacios de ancho cero tampoco se incluyen cuando copia texto del navegador.

Los caracteres especiales de ruptura que estamos utilizando actualmente son punto, barra diagonal, barra invertida, coma, subrayado,@, | y guion. No pensarías que necesitarías hacer nada para animar a romper después de guiones, pero Firefox (3.6 y 4 por lo menos) no se rompe por sí mismo en guiones rodeados de números (como números de teléfono).

También queríamos controlar el número de caracteres entre saltos artificiales, en función del espacio de diseño disponible. Eso significaba que la expresión regular para que coincidiera con las carreras largas sin interrupción debía ser dinámica. Esto se llama mucho, y nosotros no queríamos crear las mismas expresiones regulares idénticas una y otra vez por razones de rendimiento, por lo que usamos una caché de expresiones regulares simple, marcada por la expresión regex y sus indicadores.

Aquí está el código; probablemente daría un espacio de nombres a las funciones en un paquete de utilidad:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Prueba como esta:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

Actualización 2: Parece que los espacios de ancho cero de hecho están incluidos en el texto copiado en al menos algunas circunstancias, simplemente no se pueden ver. Obviamente, animar a la gente copiar texto con caracteres ocultos en él es una invitación a tener datos como ese ingresados en otros programas o sistemas, incluso en el propio, donde puede causar problemas. Por ejemplo, si termina en una base de datos, las búsquedas en ella pueden fallar, y es probable que las cadenas de búsqueda como esta también fallen. El uso de las teclas de flecha para moverse a través de datos como este requiere (con razón) una pulsación de tecla adicional para moverse a través del personaje que no se puede ver, algo extraño para los usuarios si se dan cuenta.

En un sistema cerrado, usted puede filtrar ese personaje en la entrada para protegerse, pero eso no ayuda a otros programas y sistemas.

Dicho esto, esta técnica funciona bien, pero no estoy seguro de cuál sería la mejor opción de carácter que causa ruptura.

Actualización 3: Tener este carácter terminar en los datos ya no es una posibilidad teórica, es un problema observado. Los usuarios envían datos copiados de la pantalla, se guardan en la base de datos, las búsquedas se rompen, las cosas se ordenan extrañamente, etc..

Lo hicimos dos cosas:

1. Escribió una utilidad para eliminarlos de todas las columnas de todas las tablas en todas las fuentes de datos para esta aplicación.
2. Se agregó filtrado para eliminarlo a nuestro procesador de entrada de cadenas estándar, por lo que se ha ido cuando cualquier código lo ve.

Esto funciona bien, al igual que la técnica en sí, pero es un cuento con moraleja.

Actualización 4: Estamos usando esto en un contexto donde los datos alimentados a esto pueden ser HTML escapados. En las circunstancias adecuadas, puede insertar espacios de ancho cero en el centro de las entidades HTML, con resultados funky.

El arreglo fue agregar ampersand a la lista de caracteres que no rompemos, así:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

Es necesario establecer "table-layout: fixed" para que word-wrap funcione

El GUION es la respuesta correcta (dada arriba). El verdadero problema detrás de su pregunta es que los navegadores web siguen siendo (en 2008) extremadamente primitivos que no tienen una función de partición de palabras. Mira, todavía estamos en los primeros comienzos del uso de la computadora, tenemos que ser pacientes. Mientras los diseñadores gobiernen el mundo web, tendremos dificultades para esperar algunas características nuevas realmente útiles.

ACTUALIZAR: A partir de diciembre de 2011, ahora tenemos otra opción, con el emergente soporte de estas etiquetas en FF y Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

He hecho algunas pruebas básicas y parece que funciona en una versión reciente de Mobile Safari y Safari 5.1.1.

Tabla de Compatibilidad: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

Para compatibilidad con IE 8 + use:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Véalo aquí http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container /

Todo lo que tenía que hacer era aplicar esto al estilo del contenedor div con un ancho establecido.

Usa esto

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

Si tienes esto -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

Simplemente cambie a un formato vertical con divs conteniendo y use min-width en su CSS en lugar de width -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Por supuesto, si está mostrando datos tabulares genuinos, está bien usar una tabla real, ya que es semánticamente correcta e informará a las personas que usan lectores de pantalla que se supone que deben estar en una tabla. Es usarlos para el diseño general o el corte de imágenes por lo que la gente te linchará.

Tuve que hacer lo siguiente porque, si las propiedades no se declaraban en el orden correcto, rompería aleatoriamente las palabras en el lugar equivocado y sin agregar un guion.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Publicado originalmente por Enigmo: https://stackoverflow.com/a/14191114

Sí, si es posible, establecer un ancho absoluto y establecer overflow : auto funciona bien.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap: break-word" funciona en Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap /

Añade esto a css de tu div: word-wrap: break-word;

Después de todo, la palabra se envuelve y se rompe, conserve su desbordamiento y vea si esto resuelve su problema. simplemente cambie la pantalla de su div a: display: inline;

Una función simple (requiere subrayado.js) based basado en @porneL respuesta

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

He escrito una función que funciona muy bien donde inserta ­ x letras en la palabra para un buen salto de línea. Todas las respuestas aquí no son compatibles con todos los navegadores y dispositivos, pero esto funciona bien usando PHP:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}