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, los elementos de ajuste de texto normal (texto asiático y texto no asiático) tienen el espacio en blanco predeterminado: normal, y se ajustarán automáticamente después del ancho definido.
HTML
<div id="wrap">Los elementos de ajuste de texto normal (texto asiático y no asiático) tienen el espacio en blanco predeterminado: normal, cuando se definen</div>
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;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
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;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Efecto: el contenedor es normal y el contenido está oculto para la tabla.
(1) (navegador IE) Utilice el diseño de tabla: fijo para forzar el ancho de la tabla y ocultar el exceso de contenido;
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</tabla>
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;
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="palabra-break: break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap: break-word;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</tabla>
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) Utilice 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, use desbordamiento: oculto; para ocultar más allá del contenido, overflow:auto no puede funcionar aquí;
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="palabra-break: break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</tabla>
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