salto de texto en css/js

Question

Estoy buscando una forma de varios navegadores para envolver porciones largas de texto que no tienen espacios en blanco (por ejemplo, URL largas) dentro de div con anchos predeterminados.

Estas son algunas de las soluciones que he encontrado en la web y por qué No trabajo para mí:

• overflow: hidden/auto/desplazarse - Necesito todo el texto para ser visible sin desplazamiento. El div puede crecer verticalmente, pero no horizontalmente.
• Inyección & shy; en la cadena a través de js/server-side - & shy; es compatible con FF3 ahora, pero copiar y pegar una URL con & 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.
• volcando texto en un elemento oculto y midiendo offsetWidth - relacionado con el elemento anterior, requiere agregar caracteres adicionales a 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 prometedores, pero no son muy allá:

• word-wrap: break-palabra - es ahora part of CSS3 working draft, pero no es soportado por cualquiera de Firefox, Opera o Safari todavía. Esta sería la solución ideal si funciona en todos los navegadores de hoy :(
• inyectar <wbr> etiquetas en la cadena a través de js/del lado del servidor - copiar y pegar direcciones URL funciona en todos los navegadores, pero todavía no lo hacen tener una buena manera de medir dónde colocar los saltos. Además, esta etiqueta invalida HTML.
• añadiendo descansos después de cada carácter - es mejor que miles de inserciones DOM, pero aún no es ideal (agregar elementos DOM a un documento se come memoria y ralentiza las consultas del selector, entre otras cosas).

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

Answer 1

Hubo un problema vagamente relacionados aquí textarea with 100% width ignores parent element's width in IE7

No sabe si alguna vez se ha encontrado ninguna solución definitiva, pero parece que fue el más cercano palabra-break: romper todo, lo 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 que la mayoría de los otros navegadores pueden fallar, lo que podría ayudar.

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

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

Answer 2

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

word-wrap soporte de los navegadores no es horrible , considerando todas las cosas, Safari, Internet Explorer y Firefox 3.1 (Alpha Build) todo el apoyo que (src), por lo que puede no ser tan lejos.

En lo que respecta a la rotura del lado del servidor, he utilizado este método 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, porque las palabras de más de 10 caracteres, yo los separé a los 5 caracteres cada una. Esto parece funcionar para todos los casos de uso que me han entregado.

Answer 3

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

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 4

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

Answer 5

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 me acaba de encontrar este artículo http://www.impressivewebs.com/word-wrap-css3/

lo que debe utilizar

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

.no_wordwrap { 
    word-wrap: normal; 
} 

Answer 6

uso white-space: normal, en css si necesidad de ajustar el texto automáticamente en función de la altura y ancho del componente para mostrar espero que esto pueda ser útil para usted.

Answer 7

muy similar a la respuesta de Owen, con ello se consigue que el servidor del lado del mismo en una línea:

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

Answer 8

esto se puede arreglar el problema

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