Solución a las letras inglesas de Firefox sin líneas de envoltura

El diseño del texto tendrá algunos requisitos de formato dependiendo del idioma. Por ejemplo, los signos de puntuación como las comas y las semicolones en chino simplificado no aparecerán al comienzo de una línea. Para el inglés, no se mostrará una palabra completa en dos líneas. El navegador mostrará el texto basado en principios como este. Sin embargo, debido a que la página web tiene limitaciones de ancho, letras continuas y largas, números o signos de puntuación exceden el límite del ancho del área donde se encuentra, lo que afecta la visión de la página, como se muestra en el Ejemplo 1. Este problema es particularmente prominente cuando se muestra información de entrada del usuario. Aquí estamos hablando de cómo resolver este problema.

En el borrador de CSS3, se agregan dos nuevas propiedades Word-Wrap y Word Break al procesamiento del texto para resolver este problema:

1. {Word-Wrap: Break-Word;}: De acuerdo con las reglas de texto para los idiomas asiáticos y no asiáticos, las envolturas de línea se permiten dentro de los caracteres, y los personajes en las líneas de texto del idioma no asiático pueden romperse dentro de los caracteres arbitrarios.
2. {Word-Break: Break-All;}: el contenido se romperá dentro del límite, si es necesario, el descenso de la palabra también sucederá.

Las siguientes son las situaciones de apoyo de los navegadores comunes:

• [1] En la compatibilidad de CSS de MSDN y el Explorador de Internet, se puede ver que IE8 admitirá tanto Word-Wrap como Break como IE6 e IE7, pero no admití estos dos elementos después de probar en IE8BETA2. Dado que IE8 todavía está en la etapa beta y creo que IE8 eventualmente lo apoyará, es una buena manera de declarar <meta content="IE=7" http-equiv="X-UA-Compatible" /> en el encabezado para hacer que IE8 interprete la página de acuerdo con IE7.
• [2] Firefox 3.1 admitirá el atributo de Word-Wrap

Dado que {Word Break: Break-All;} causa una legibilidad severa del inglés y los numéricos y no puede envolver símbolos consecutivos, {Word-Wrap: Break-Word;} es una opción relativamente buena.

Sin embargo, frente a un apoyo tan pobre del navegador, no podemos resolver este problema sin usar JavaScript. Es decir, cuando el navegador no admite la solución CSS, inserte los caracteres "8203" en la posición apropiada de la cadena continua (por supuesto, también puede usar <wbr /> y "tímido; para el soporte de estos tres caracteres en el navegador, consulte la" etiqueta WBR "de PPK). Estos caracteres no se mostrarán en el navegador, pero provocan que las cajas largas se envuelvan.

 function fnBreakWordAll(o){
 var o = o || {},
 iWord = O.Word || 13,
 ire = o.re || '[A-ZA-Z0-9]',
 Ball = O.all || FALSO,
 scLassName = O.ClassName || 'Word Break-All',
 Aels = O.els || (función(){
 var aels = [],
 aallels = document.getElementsByTagName ('*'),
 RE = new Regexp ('(?:^| // S +)' + scLassName + '(?: // s + | $)');
 para (var i = 0, ilen = aallels.length; i <ilen; ++ i) {
 if (re.test (aallels [i] .classname)) {
 aels [aels.length] = aallels [i];
 }
 }
 regresar aels;
 }) () || [],
 fnbreakword = function (OEL) {
 // Modificar basado en http://www.hedgerwow.com/360/dhtml/css-word-break.html
 if (! oel || oel.nodetype! == 1) {
 devolver falso;
 } else if (oel.currentStyle && tipof oel.currentstyle.wordwrap === 'string') {
 breakword = function (oel) {
 oel.runtimeStyle.WordWrap = 'Break-Word';
 devolver verdadero;
 }
 return breakword (OEL);
 } else if (document.createTreewalker) {
 var trim = function (str) {
 str = str.replace (/^/s/s*/, '');
 var ws = // s/,
 i = str.length;
 while (ws.test (str.charat (-i)));
 return str.slice (0, i + 1);
 }
 breakword = function (oel) {
 var dwalker = document.createTreewalker (OEL, NodeFilter.Show_Text, Null, False);
 var nodo, s, c = string.FromCharCode ('8203'),
 // re =/([A-Za-Z0-9] {0,13})/;
 re = new Regexp ('(' + ire + '{0,' + iword + '})');
 while (dwalker.nextnode ()) {
 nodo = dwalker.CurrentNode;
 s = trim (node.nodeValue) .split (re) .join (c);
 node.nodeValue = s;
 }
 devolver verdadero;
 }
 return breakword (OEL);
 }
 };
 para (var i = 0, n = aels.length; i <n; ++ i) {
 var sua = navigator.useragent,
 stn = aels [i] .tagname.tolowercase ();
 if ((/opera/). test (sua) || (/firefox/).test(sua) || ((/khtml/).test(sua) &&
 (stn ​​=== 'td' || stn === 'th')) || pelota){
 fnbreakword (Aels [i]);
 }
 }
 }

Para aplicaciones específicas, consulte el ejemplo de demostración

La función FNWordBreakAll proporciona algunos parámetros personalizados, y los métodos y parámetros de uso son los siguientes:

 fnWordBreakAll({word:15,re:'[//w]',all:true});

La parte central de esta función se modificó de Hedger Wang. Se compiló una solución de JavaScript "Browser Word Breaker". Utiliza documentos. Básicamente, no es un problema cuando se usa en texto chino puro, pero si observa los ejemplos que da, encontrará que cuando hay inglés o números en el texto, aunque resuelve el problema de la ruptura de la línea, hace que el texto sea difícil de leer y aumenta el espacio entre los caracteres, por lo que hice las mejoras anteriores basadas en esto.