php - nbsp - ¿Cómo envolver las líneas largas sin espacios en HTML?

espacio html &nbsp

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 ................................................. .................................................. ..........................................

Intenté 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

Agregue el espacio de ancho cero ( ​ ) a la cadena y se ajustará.

Aquí hay un ejemplo de Javacript:

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

Answer 2

Basado en la sugerencia de Jon, el código que creé:

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 3

Estaba tratando de resolver el mismo problema y encontré la solución aquí:

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

Solución: agregando al contenedor las siguientes propiedades de 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 todos para que tenga una mejor compatibilidad entre navegadores

Espero que esto ayude

Answer 4

Esto es lo que hago en ASP.NET:

1. Dividir el campo de texto en espacios para obtener todas las palabras
2. Iterar las palabras buscando palabras que son más largas que cierta cantidad
3. Inserte 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

Evito el problema al no tener mi barra lateral derecha fija así: P

Answer 6

He publicado una solución que usa JavaScript y una expresión regular simple para romper la palabra larga para que pueda ser ajustada sin romper el diseño de su sitio web.

Ajustar largas líneas usando CSS y JavaScript

Answer 7

Me gusta utilizar el overflow: auto propiedad overflow: auto CSS / emparejamiento de valores. 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 del overflow: auto comparación con el overflow: scroll es que con el modo auto , las barras de desplazamiento solo aparecerán cuando exista un contenido desbordado. Con scroll , las barras de desplazamiento están siempre visibles.

Answer 8

Me gustaría poner la publicación en un div que tendría un desbordamiento de configuración de ancho fijo para desplazarse (o para ocultar por completo dependiendo del contenido).

asi como:

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

Pero solo soy yo.

EDITAR: Como señala cLFlaVA ... es mejor usar auto luego scroll . Estoy de acuerdo con él.

Answer 9

Me sorprende que nadie haya mencionado una de mis soluciones favoritas para este problema, la etiqueta <wbr> (salto de línea opcional). Es bastante compatible con los navegadores 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, mostrar los comentarios de los usuarios 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 que son demasiado largas , o en enlaces.

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

Answer 10

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

Las soluciones ocultan el desbordamiento (es decir, desplazamiento o simplemente oculto) o se expanden para adaptarse. 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?

R: No puedes.

Puedes leer break-word

EDITAR

Consulte esta solución Cómo aplicar un estilo de continuación / continuación de línea y formato de código con css

o

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

Answer 11

No lo he usado personalmente, pero Hyphenator parece prometedor.

Ver también preguntas relacionadas (posiblemente duplicadas):

• ajuste de palabras en css / js
• ¿Quién ha resuelto el problema de la palabra larga-rompe-mi-div? (sugerencia: no )

Answer 12

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

(Se está rompiendo por 15 caracteres y aplicando "& shy;" entre, pero puede cambiarlo 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 13

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

Consulte 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 14

en CSS3:

word-wrap:break-word