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. El mejor CSS para definir saltos de línea .wrap { diseño de tabla: fijo; salto de palabra: romper todo; desbordamiento: oculto } 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;} <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. <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> Efecto: el contenedor es normal y el contenido está oculto. para mesa <table style="table-layout:fixed" width="200"> Efecto: ocultar contenido redundante 2. (navegador IE) Use diseño de tabla: fijo para forzar el ancho de la tabla, y el td interno usa salto de palabra: romper todo o ajuste de palabra: salto de palabra; <table width="200" style="table-layout:fixed;"> 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í; 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 para ejecutar el cuadro de código. Finalmente, la posibilidad de que ocurra este fenómeno es muy pequeña, pero los internautas. No se pueden descartar bromas. El siguiente es el efecto del ejemplo mencionado. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h1><code>IE ajuste de palabra: palabra de corte;</code></h1> <h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
Aquí desbordamiento: oculto o automático;
==================================================== ================
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
<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;
o
#wrap{ajuste de palabra: ancho de palabra de ruptura: 200 px;}
#wrap{palabra-break:break-all; ancho:200px; desbordamiento:auto;}
1. (navegador IE) Utilice table-layout:fixed para forzar el ancho de la tabla y ocultar el exceso de contenido.
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</tabla>
<tr>
<td width="25%" style="palabra-break: break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap: break-word;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</tabla>
<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>
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312" />
<title>Ajuste de línea de carácter</title>
<tipo de estilo="texto/css">
tabla,td,th,div { borde:1px verde sólido;}
código { font-family:"Courier New", Courier, monoespacio;}
</estilo>
</cabeza>
<cuerpo>
<h1><code>div</code></h1>
<h1><code>Todos los espacios en blanco:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap todavía ocurre en un elemento td que tiene su atributo WIDTH establecido en un valor menor que el contenido desenvuelto de la celda, incluso si la propiedad noWrap está establecida en true Por lo tanto, el atributo WIDTH tiene prioridad sobre la propiedad noWrap en este escenario</div>.
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div style="word-break:break-all; ancho:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>tabla</code></h1>
<h1><code>diseño de tabla: fijo;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</tabla>
<h1><code>diseño de tabla: fijo; salto de palabra: salto todo; ajuste de palabra: salto de palabra;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</tabla>
<h1><code>FF diseño de tabla: fijo; desbordamiento: oculto;</code></h1>
<estilo de tabla="diseño-de tabla:fijo" ancho="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>
</cuerpo>
</html>