javascript - change - ajuste de palabras en css/js

title css

Question

Estoy buscando una forma cruzada de envolver porciones largas de texto que no tengan espacios de ruptura (por ejemplo, URL largas) dentro de div con anchos predeterminados.

Aquí hay algunas soluciones que he encontrado en la web y por qué no funcionan para mí:

• overflow: hidden / auto / scroll - Necesito que todo el texto esté visible sin desplazarse. El div puede crecer verticalmente, pero no horizontalmente.
• Inyectar y tímido; en la cadena a través de js / server-side - & shy; es compatible con FF3 ahora, pero copia y pega una URL con un & tímido; en el medio no funcionará en Safari. Además, que yo sepa, no existe un método limpio para medir el ancho del texto para descubrir las mejores desviaciones de cadena para agregar estos caracteres (hay una forma hacky, ver siguiente artículo). Otro problema es que hacer zoom en Firefox y Opera puede romper esto fácilmente.
• volcar texto en un elemento oculto y medir offsetWidth - relacionado con el elemento anterior, requiere agregar caracteres adicionales en la cadena. Además, medir la cantidad de interrupciones requeridas en un cuerpo de texto largo podría requerir fácilmente miles de costosas inserciones de DOM (una por cada longitud de subcadena), lo que podría congelar el sitio de manera efectiva.
• usando una fuente monoespaciada - de nuevo, el acercamiento puede arruinar los cálculos de ancho, y el texto no se puede diseñar libremente.

Cosas que parecen prometedoras pero que no están del todo allí:

• word-wrap: break-word : ahora es parte del borrador de trabajo de CSS3 , pero aún no es compatible con Firefox, Opera o Safari. Esta sería la solución ideal si funcionó en todos los navegadores de hoy :(
• Inyectar etiquetas <wbr> en la cadena a través de js / server-side - copiar y pegar URL funciona en todos los navegadores, pero todavía no tengo una buena manera de medir dónde poner los descansos. Además, esta etiqueta invalida HTML.
• agregar descansos después de cada personaje : es mejor que miles de inserciones DOM, pero aún no es ideal (agregar elementos DOM a un documento consume memoria y ralentiza las consultas del selector, entre otras cosas).

¿Alguien tiene más ideas sobre cómo abordar este problema?

Answer 1

Css yo!

.wordwrap {
    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+ */ 
}

También acabo de encontrar este artículo http://www.impressivewebs.com/word-wrap-css3/

Entonces deberías usar

.wordwrap {  
    word-wrap: break-word;
}  

.no_wordwrap {  
    word-wrap: normal;
}  

Answer 2

Hubo un problema vagamente relacionado aquí textarea con un ancho del 100% ignora el ancho del elemento principal en IE7

No sé si alguna vez se encontró alguna solución concluyente, pero parece que lo más cercano fue romper palabra: break-all , que podría hacer el trabajo en Internet Exploder.

También encontré este http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html enterrado en mis marcadores, lo que indica una alternativa para la mayoría de los otros navegadores, que podría ayuda.

CSS3 será genial si alguna vez llega aquí ...

Espero que ayude, estará interesado en ver qué se te ocurre. Lo siento, no puedo ofrecer nada probado o más específico.

Answer 3

Muy similar a la respuesta de Owen, esto logra lo mismo en el servidor en una línea:

return preg_replace_callback( ''//w{10,}/'', create_function( ''$matches'', ''return chunk_split( $matches[0], 5, "​" );'' ), $value );

Answer 4

Normalmente he manejado esto usando una combinación de word-wrap y la idea <wbr> . tenga en cuenta que hay algunas variants . como puedes ver, ​ es probablemente tu mejor apuesta para la compatibilidad.

word-wrap soporte de navegador de word-wrap no es terrible , considerando todo lo anterior, Safari, Internet Explorer y Firefox 3.1 (Alpha Build) todos lo soportan ( src ), por lo que puede que no estemos tan lejos.

En cuanto a la rotura del lado del servidor, he usado este método con bastante éxito (php):

function _wordwrap($text)   {
    $split = explode(" ", $text);
    foreach($split as $key=>$value)   {
        if (strlen($value) > 10)    {
            $split[$key] = chunk_split($value, 5, "​");
        }
    }
    return implode(" ", $split);
}

Básicamente, para palabras de más de 10 caracteres, los divido a 5 caracteres cada uno. Esto parece funcionar para todos los casos de uso que me han entregado.

Answer 5

Puede usar el atributo CSS de diseño de tabla + ajuste de tabla que ahora funciona en IE7-8 y FF3.5. No resolverá el problema, pero al menos su diseño no se romperá.

Answer 6

Usar una expresión regular en PHP debería ser más rápido para dividir palabras largas. Creé una función que maneja htmlspecialchars y divide palabras con & shy; Aquí está la función para cualquiera que esté interesado. Simplemente pase el hilo y la longitud máxima de la palabra (déjelo como 0 si no quiere separar palabras con & shy;) y devolverá una cadena con html caracteres especiales convertidos y las palabras divididas con & shy;

function htmlspecialchars2($string = "", $maxWordLength = 0)
{
    if($maxWordLength > 0)
    {
        $pattern = ''/(/S{''.$maxWordLength.'',}?)/'';
        $replacement = ''$1­'';
        $string = preg_replace($pattern, $replacement, $string);
    }

    //now encode special chars but dont encode ­
    $string = preg_replace(array(''//&(?!shy/;)/'',''//"/'',"//'/",''//</'',''//>/''), array(''&amp;'',''&quot;'',''&#039;'',''&lt;'',''&gt;''), $string);

    return $string;
}

Answer 7

esto puede solucionar tu problema

function htmlspecialchars2($string = "", $maxWordLength = 0){
 return  wordwrap($string , $maxWordLength,"/n", true);
 }

Answer 8

use el espacio en blanco: normal en CSS si es necesario ajustar el texto automáticamente de acuerdo con la altura y el ancho del componente para mostrar que esto puede ser útil para usted.