Este artículo enumera los estilos CSS recomendados para saltos de línea que son compatibles con IE y FF, y detalla las diferencias entre ajuste de palabras y salto de palabras.
Estilo recomendado de salto de línea CSS compatible con IE y FF
La mejor manera es
ajuste de palabra: romper palabra; desbordamiento: oculto;
en lugar de
ajuste de palabra:salto de palabra; salto de palabra:salto-todo;
Ni
ajuste de palabra: romper palabra; desbordamiento: automático;
No hay ningún problema en IE, pero en FF, las cadenas largas en inglés se bloquearán más allá del contenido.
La diferencia entre ajuste de palabras y salto de palabras
El siguiente es el contenido citado:
ajuste de palabras:
Valor predeterminado normal. El contenido excede los límites de su contenedor.
break-word El contenido pasa a la siguiente línea y se activa un salto de palabra cuando es necesario. salto de palabra:
normal Predeterminado Permite saltos de línea dentro de palabras. Parece que solo funciona para texto asiático.
break-all Se comporta igual que el texto asiático, pero permite que la línea se rompa arbitrariamente para texto no asiático. Este valor es adecuado para texto asiático que contiene algunos extractos de texto no asiático.
keep-all No permite dividir palabras para chino, japonés y coreano. Funciona de la misma manera que lo normal para todos los idiomas no asiáticos. Este valor está optimizado para texto que incluye pequeñas cantidades de chino, japonés o coreano. |
El resumen es el siguiente:
El ajuste de palabras controla el ajuste de líneas.
Cuando se utiliza break-word, se forzarán saltos de línea. No hay problema con el chino y no hay problema con las oraciones en inglés. Pero para largas cadenas de inglés, no funciona.
break-word controla si se deben dividir palabras.
Normal es la situación predeterminada y las palabras en inglés no se dividen.
romper todo es una palabra de ruptura. Cuando una palabra alcanza un límite, la siguiente letra pasa automáticamente a la siguiente línea. Resuelve principalmente el problema de las largas cadenas en inglés.
keep-all se refiere a palabras continuas en chino, japonés y coreano. Es decir, si solo usa este tiempo sin ajuste de palabras, los chinos no ajustarán. (Las oraciones en inglés son normales).
es decir, bajo:
Usar word-wrap:break-word; todo funciona bien.
ff siguiente:
Si no usas estos dos, no habrá ningún problema con el chino. Tampoco habrá problema con las frases en inglés. Sin embargo, las cadenas largas en inglés pueden causar problemas.
Para resolver cadenas largas en inglés, generalmente se usa word-wrap:break-word;word-break:break-all; Sin embargo, este método hará que las palabras de las oraciones en inglés ordinario se desconecten (lo mismo ocurre con ie).
El principal problema actualmente existe en la desconexión de largas cadenas de palabras en inglés y en inglés. De hecho, una cadena larga en inglés es sólo una palabra relativamente larga.
Es decir, ¿deberían desconectarse las palabras en inglés? El problema es obvio y obviamente no se debe desconectar.
Para cadenas largas en inglés, es malicioso, por lo que, por supuesto, no hay necesidad de preocuparse por ello. Sin embargo, también debemos pensar en algunas formas de evitar que expanda el contenedor.
Uso: overflow:auto; debajo, es decir, las cadenas largas se ajustarán automáticamente. ff, se cubrirán hilos largos.
Entonces, para resumir, la mejor manera es word-wrap:break-word;overflow:hidden en lugar de word-wrap:break-word;word-break:break-all;.
word-wrap:break-word;overflow:auto; No hay ningún problema en IE. Bajo ff, las cadenas largas quedarán parcialmente oscurecidas.
Además, el código de prueba es el siguiente:
El siguiente es el contenido citado:
1.htm================================================= = ===================== <estilo>
.c1{ ancho:300px; borde:1px rojo sólido}
.c2{ ancho:300px;word-wrap:break-word borde:1px amarillo sólido}
.c3{ ancho:300px;word-wrap:break-word;word-break:break-all borde:1px verde sólido}
.c4{ ancho:300px;word-wrap:break-word;word-break:keep-all borde:1px azul sólido}
.c5{ ancho:300px;salto de palabra:salto-todo; borde:1px negro sólido}
.c6{ ancho:300px;salto de palabra:guardar-todo; borde:1px rojo sólido}
.c7{ ancho:300px;wrap-word:break-word;overflow:auto borde:1px; amarillo sólido}
</estilo> .c1{ ancho:300px; borde:1px rojo sólido}
<div clase="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div clase=c1>
Todo esto es inglés. Todo esto es inglés.
</div>
<div clase=c1>
Todo en chino. Todo en chino. Todo en chino.
</div>
<div clase=c1>
Arreglo mixto de chino e inglés. Chino e inglés. Arreglo mixto de chino e inglés. Chino e inglés.
</div> <br>
.c2{ ancho:300px;word-wrap:break-word borde:1px amarillo sólido}
<div clase="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div clase=c2>
Todo esto es inglés. Todo esto es inglés.
</div>
<div clase=c2>
Todo en chino. Todo en chino. Todo en chino.
</div>
<div clase=c2>
Arreglo mixto de chino e inglés. Chino e inglés. Arreglo mixto de chino e inglés. Chino e inglés.
</div> <br>
.c3{ ancho:300px;word-wrap:break-word;word-break:break-all borde:1px verde sólido}
<div clase="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div clase=c3>
Todo esto es inglés. Todo esto es inglés.
</div>
<div clase=c3>
Todo en chino. Todo en chino. Todo en chino.
</div>
<div clase=c3>
Arreglo mixto de chino e inglés. Chino e inglés. Arreglo mixto de chino e inglés. Chino e inglés.
</div> <br>
.c4{ ancho:300px;word-wrap:break-word;word-break:keep-all borde:1px azul sólido}
<div clase="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div clase=c4>
Todo esto es inglés. Todo esto es inglés.
</div>
<div clase=c4>
Todo en chino. Todo en chino. Todo en chino.
</div>
<div clase=c4>
Arreglo mixto de chino e inglés. Chino e inglés. Arreglo mixto de chino e inglés. Chino e inglés.
</div> <br>
.c5{ ancho:300px;salto de palabra:salto-todo; borde:1px negro sólido}
<div clase="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div clase=c5>
Todo esto es inglés. Todo esto es inglés.
</div>
<div clase=c5>
Todo en chino. Todo en chino. Todo en chino.
</div>
<div clase=c5>
Arreglo mixto de chino e inglés. Chino e inglés. Arreglo mixto de chino e inglés. Chino e inglés.
</div> <br>
.c6{ ancho:300px;salto de palabra:guardar-todo; borde:1px rojo sólido}
<div clase="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div clase=c6>
Todo esto es inglés. Todo esto es inglés.
</div>
<div clase=c6>
Todo en chino. Todo en chino. Todo en chino.
</div>
<div clase=c6>
Arreglo mixto de chino e inglés. Chino e inglés. Arreglo mixto de chino e inglés. Chino e inglés.
</div> <br>
.c7{ ancho:300px;word-wrap:break-word;overflow:auto borde:1px amarillo sólido}
<div clase="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div clase=c7>
Todo esto es inglés. Todo esto es inglés.
</div>
<div clase=c7>
Todo en chino. Todo en chino. Todo en chino.
</div>
<div clase=c7>
Arreglo mixto de chino e inglés. Chino e inglés. Arreglo mixto de chino e inglés. Chino e inglés.
</div> |
