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) white-space:normal; word-break:break-all; aquí el primero sigue el estándar.
#wrap{espacio en blanco:normal; ancho:200px;
o
#wrap{palabra-break:break-all;ancho:200px;}
<div id="wrap">ddd11111111111111111111111111111</div>
Efecto: se puede lograr un salto de línea
2. (navegador Firefox) white-space:normal; word-break:break-all;overflow:hidden no tiene el mismo FF; mucho Un buen método de implementación es ocultar o agregar barras de desplazamiento. ¡Por supuesto, es mejor no agregar barras de desplazamiento!
#wrap{espacio en blanco:normal; ancho:200px; desbordamiento:auto;}
o
#wrap{palabra-break:break-all;ancho:200px; desbordamiento:auto }
<div id="wrap">ddd11111111111111111111111111111111111111</div>
Efecto
: el contenedor es normal y el contenido está oculto.
Para la tabla
1. (navegador IE) use el estilo table-layout:fixed;
.tb{diseño de tabla: fijo}
</estilo>
<tabla clase="tbl" ancho="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Efecto: puede ajustar líneas
http://www.knowsky.com/
2. (navegador IE) use el estilo
<estilo>
.tb {diseño de tabla: fijo}
</estilo>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Efecto: puede ajustar
3. (navegador IE) use el estilo table-layout:fixed y nowrap<style>
cuando use porcentaje para corregir el tamaño td
.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>
</table>
Efecto: Ambos tds se ajustan normalmente
4. (navegador Firefox) Use los estilos table-layout: fijo y nowrap cuando use un porcentaje para fijar el tamaño de td, y use 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>
</table>
El ancho de celda aquí debe definirse en porcentaje. El efecto es: visualización normal, pero sin ajuste de línea.
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.