Cómo envolver líneas largas sin espacios en HTML?

Question

Si un usuario escribe en una línea larga sin espacios o espacios en blanco, romperá el formateo yendo más ancho que el elemento actual. Algo como:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ........................................ .................................................. ..................................................

He intentado simplemente usar wordwrap() en PHP, pero el problema es que si hay un enlace u otro HTML válido, se rompe.

Parece que hay algunas opciones en CSS, pero ninguna de ellas funciona en todos los navegadores. Ver el ajuste de palabras en IE.

¿Cómo resuelves este problema?

Answer 1

No he utilizado personalmente, pero Hyphenator parece prometedor.

ver también relacionados (posiblemente duplicados) preguntas:

• word wrap in css/js
• Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)

Answer 2

que esquivar el problema por no tener mi barra lateral derecha fijado así: P

Answer 3

me gustaría poner el cargo en un div que tendría el establecimiento de desbordamiento para desplazarse una anchura fija (o para ocultar por completo, dependiendo del contenido)

así como:

#post{ 
    width: 500px; 
    overflow: scroll; 
} 

Pero eso es sólo conmigo.

EDIT: Como señala cLFlaVA ... es mejor utilizar auto continuación scroll. Estoy de acuerdo con él.

Answer 4

Aquí es lo que hago en ASP.NET:

1. Dividir el campo de texto en los espacios de conseguir todas las palabras
2. Iterar las palabras en busca de palabras que tengan más de una cierta cantidad
3. Insertar cada x caracteres (por ejemplo, cada 25 caracteres.)

Miré otras formas basadas en CSS de hacer esto, pero no encontré nada que funcionara entre navegadores.

Answer 5

Me gusta usar el overflow: auto enlace propiedad/valor CSS. Esto representará el objeto principal de la manera en que esperaría que apareciera. Si el texto dentro del elemento primario es demasiado ancho, las barras de desplazamiento aparecen dentro del objeto mismo. Esto mantendrá la estructura de la forma que usted desea que se vea y le brindará al espectador la capacidad de desplazarse para ver más.

Editar: lo bueno de overflow: auto en comparación con overflow: scroll es que con auto, las barras de desplazamiento solo aparecerán cuando exista contenido rebosante. Con scroll, las barras de desplazamiento siempre están visibles.

Answer 6

No hay una solución HTML/CSS "perfecta".

Las soluciones ocultan el desbordamiento (es decir, se desplazan o simplemente se ocultan) o se expanden para ajustarse. No hay magia

P: ¿Cómo se puede colocar un objeto de 100 cm de ancho en un espacio de solo 99 cm de ancho?

A: No se puede.

Usted puede leer break-word

EDITAR

Por favor, echa un vistazo a esta solución How to apply a line wrap/continuation style and code formatting with css

o

How to prevent long words from breaking my div?

Answer 7

basado en la sugerencia de Jon el código que he creado:

public static string WrapWords(string text, int maxLength) 
    { 
     string[] words = text.Split(' '); 
     for (int i = 0; i < words.Length; i++) 
     { 
      if (words[i].Length > maxLength) //long word 
      { 
       words[i] = words[i].Insert(maxLength, " "); 
       //still long ? 
       words[i]=WrapWords(words[i], maxLength); 
      } 
     } 
     text = string.Join(" ", words); 
     return (text); 
    } 

Answer 8

He publicado una solución que usa JavaScript y un simple Regula r Expression para dividir la palabra larga para que pueda envolverse sin romper el diseño de su sitio web.

Wrap long lines using CSS and JavaScript

Answer 9

en CSS3:

word-wrap:break-word 

Answer 10

Sé que este es un problema muy viejo y ya que tenía el mismo problema que buscado una solución fácil. Como mencioné en la primera publicación, decidí utilizar la función de conversión de palabras de php.

Véase el siguiente ejemplo de código para obtener información ;-)

<?php 
    $v = "reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink"; 
    $v2 = wordwrap($v, 12, "<br/>", true); 
?> 
<html> 
    <head> 
     <title>test</title> 
    </head> 
    <body> 
     <table width="300" border="1"> 
      <tr height="30"> 
       <td colspan="3" align="center" valign="top">test</td> 
      </tr> 
      <tr> 
       <td width="100"><a href="<?php echo $v; ?>"><?php echo $v2; ?></a></td> 
       <td width="100">&nbsp;</td> 
       <td width="100">&nbsp;</td> 
      </tr> 
     </table> 
    </body> 
</html> 

Espero que esto ayude.

Answer 11

yo estaba tratando de resolver el mismo problema y me encontré de solución aquí:

http://perishablepress.com/press/2010/06/01/wrapping-content/

Solución: añadir al recipiente de las siguientes propiedades CSS

div { 
    white-space: pre;   /* CSS 2.0 */ 
    white-space: pre-wrap;  /* CSS 2.1 */ 
    white-space: pre-line;  /* CSS 3.0 */ 
    white-space: -pre-wrap;  /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    white-space: -moz-pre-wrap; /* Mozilla */ 
    white-space: -hp-pre-wrap; /* HP Printers */ 
    word-wrap: break-word;  /* IE 5+ */ 
} 

La idea es usarlos todo para que tenga una mejor compatibilidad entre navegadores

Espero que esto ayude

Answer 12

Me sorprende que nadie haya mencionado una de mis soluciones favoritas para este problema, la etiqueta <wbr> (salto de línea opcional). Es bastante well-supported in browsers y básicamente le dice al navegador que puede insertar un salto de línea si es necesario. También está el carácter de espacio de ancho relacionado, ​ con el mismo significado.

Para el caso de uso mencionado, mostrando los comentarios del usuario en una página web, supongo que ya existe algún formato de salida para evitar ataques de inyección, etc. Por lo tanto, es fácil agregar estas etiquetas <wbr> cada N caracteres en palabras demasiado tiempo, o en enlaces.

Esto es especialmente útil cuando necesita control sobre el formato de la salida, que CSS no siempre le permite hacer.

Answer 13

No quería agregar bibliotecas a mis páginas solo por romper una palabra. Luego escribí una función simple que proporcioné a continuación, espero que ayude a las personas.

(Se está rompiendo por 15 caracteres, y la aplicación de "& tímido," el medio, pero se puede cambiar fácilmente en el código)

//the function: 
BreakLargeWords = function (str) 
{ 
    BreakLargeWord = function (word) 
    { 
     var brokenWords = []; 
     var wpatt = /\w{15}|\w/igm; 
     while (wmatch = wpatt.exec(word)) 
     { 
      var brokenWord = wmatch[0]; 
      brokenWords.push(brokenWord); 
      if (brokenWord.length >= 15) brokenWords.push("­"); 
     } 
     return brokenWords.join(""); 
    } 

    var match; 
    var word = ""; 
    var words = []; 
    var patt = /\W/igm; 
    var prevPos = 0; 
    while (match = patt.exec(str)) 
    { 
     var pos = match.index; 
     var len = pos - prevPos; 
     word = str.substr(prevPos, len); 

     if (word.length > 15) word = BreakLargeWord(word); 

     words.push(word); 
     words.push(match[0]); 
     prevPos = pos + 1; 
    } 
    word = str.substr(prevPos); 
    if (word.length > 15) word = BreakLargeWord(word); 
    words.push(word); 
    var text = words.join(""); 
    return text; 
} 

//how to use 
var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"; 
var goodText = BreakLargeWords(bigText); 

Answer 14

Añadir al cero espacio de anchura (​) a la cuerda y se envolverá

Aquí está un ejemplo Javacript:

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis'; 
// add ​ between every character to make it wrap 
longWordWithOutSpace.split('').join('​');