Consejos para realizar un ajuste de línea automático con CSS

Todo el mundo sabe que el inglés continuo o los números pueden hacer que el contenedor se expanda y no se puede ajustar automáticamente según el tamaño del contenedor. ¡Aquí se explica cómo ajustarlos usando CSS!

para div

1. (navegador IE) espacio en blanco: normal; salto de palabra: romper-todo; el primero aquí sigue el estándar.

#wrap{espacio en blanco:normal; ancho:200px;
o
#wrap{palabra-break:break-all;ancho:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>

Efecto: se pueden lograr saltos de línea

2. (navegador Firefox) white-space:normal; word-break:break-all;overflow:hidden; No existe un buen método de implementación bajo el mismo FF. Solo puede ocultar o agregar barras de desplazamiento, pero, por supuesto, no. ¡El efecto es mejor!

#wrap{espacio en blanco:normal; ancho:200px; desbordamiento:auto;}
o
#wrap{palabra-break:break-all;ancho:200px; desbordamiento:auto }
<div id="wrap">ddd111111111111111111111111111111111111111</div>

Efecto: el contenedor es normal y el contenido está oculto.

para mesa

1. (navegador IE) Utilice el estilo table-layout:fixed;

<estilo>
.tb{diseño de tabla: fijo}
</estilo>
<tabla clase="tbl" ancho="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</tabla>

Efecto: puede ajustar líneas 2. (navegador IE) usa estilo

<estilo>
.tb {diseño de tabla: fijo}
</estilo>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</tabla>

Efecto: Se pueden hacer saltos de línea

3. (navegador IE) Utilice el diseño de tabla de estilo: fijo y ahora cuando utilice un porcentaje para fijar el tamaño de td.

<estilo>
.tb{diseño de tabla: fijo}
</estilo>
<tabla clase="tb" ancho=80>
<tr>
<td ancho=25% ahorarap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</tabla>

Efecto: Ambos TD se envuelven normalmente

4. (Navegador Firefox) Utilice el diseño de tabla de estilo: fijo y ahora cuando utilice porcentaje para fijar el tamaño de td y utilice div.

<estilo>
.tb {diseño de tabla: fijo}
.td {desbordamiento: oculto;}
</estilo>
<clase de tabla=tb ancho=80>
<tr><td ancho=25% clase=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</tabla>

El ancho de la celda aquí debe definirse como un porcentaje: se muestra normalmente, pero no se puede ajustar.

Nota: No existe una buena manera de empaquetar el contenido del contenedor en FF. Solo puede usar el desbordamiento para ocultar el contenido adicional y evitar afectar el efecto general.