Problema de ajuste de línea automático: el ajuste de línea de caracteres normales es más razonable, pero los números continuos y los caracteres en inglés a menudo expanden el contenedor, lo cual es un gran dolor de cabeza. A continuación se explica cómo implementar el ajuste de línea en CSS.
Para elementos a nivel de bloque como div y p, el ajuste de línea de los elementos de texto normal (texto asiático y no asiático) tiene el espacio en blanco predeterminado: normal, y se ajustará automáticamente después del ancho definido.
HTML
Los elementos de ajuste de texto normal (texto asiático y no asiático) tienen el espacio en blanco predeterminado: normal, cuando se definen
CSS
#wrap{espacio en blanco:normal; ancho:200px;
1. (navegador IE) Para caracteres ingleses continuos y números arábigos, utilice word-wrap: break-word o word-break:break-all para lograr un salto de línea forzado;
#wrap{palabra-break:break-all; ancho:200px;}
o
#wrap{ajuste de palabra: ancho de palabra de ruptura: 200 px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Efecto: se pueden lograr saltos de línea
2. (Navegador Firefox) Los saltos de línea de caracteres ingleses continuos y números arábigos no resuelven este problema en todas las versiones. Solo podemos ocultar los caracteres que exceden el límite o agregar barras de desplazamiento al contenedor.
#wrap{palabra-break:break-all; ancho:200px; desbordamiento:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Efecto: el contenedor es normal y el contenido está oculto para la tabla.
(1) (navegador IE) utiliza el diseño de tabla: fijo; fuerza el ancho de la tabla y oculta el exceso de contenido.
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
|
Efecto: ocultar contenido redundante
(2) (navegador IE) use diseño de tabla: fijo para forzar el ancho de la tabla, el td interno, use salto de palabra: romper todo o ajuste de palabra: salto de línea;
abcdefghigklmnopqrstuvwxyz 1234567890
|
abcdefghigklmnopqrstuvwxyz 1234567890
|
Efecto: Se pueden hacer saltos de línea. 3. (navegador IE) Al anidar div, p, etc. en td, th, utilice el método de ajuste de línea de div y p mencionado anteriormente.
4. (navegador Firefox) use diseño de tabla: fijo; para forzar el ancho de la tabla, el td interno usa salto de palabra: romper todo o ajuste de palabra: ajustar línea, use desbordamiento: oculto; para ocultar más allá del contenido, overflow:auto no puede funcionar aquí;
abcdefghigklmnopqrstuvwxyz1234567890 |
abcdefghigklmnopqrstuvwxyz1234567890 |
Efecto: ocultar más que el contenido 5. (Navegador Firefox) Nest div, p, etc. en td, th, etc. Utilice el método mencionado anteriormente para tratar con Firefox.
