Consejos para realizar un ajuste de línea automático al crear páginas web CSS
Autor：Eve Cole
Fecha de actualización：2025-01-15 17:00:16
Consejos para realizar el ajuste automático de líneas al crear páginas web CSS Viernes, 6 de marzo de 2009 10:47 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. A continuación se explica cómo ajustarlos. usando el método 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{word-break:break-all;width:200px;}p. ej.<div id="wrap">ddd11111111111111111111111111111111</div>Efecto: se puede lograr un ajuste de línea 2. (navegador Firefox) white-space:normal; word -break:break-all;overflow:hidden; De manera similar, no existe un buen método de implementación en FF. Solo puede 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{word-break:break-all;width:200px; overflow:auto; }p.ej.<div id="wrap">ddd11111111111111111111111111111111111</div> Efecto: el contenedor es normal y el contenido está oculto para la tabla 1. (navegador IE) utilice el diseño de tabla de estilo: fijo;
ej.<estilo>
.tb{diseño de tabla: fijo}
</style><table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>Efecto: Puede ajustar las líneas 2. (navegador IE) Utilice el diseño de tabla de estilo: fijo y ahorarapeg.<estilo>
.tb {diseño de tabla: fijo}
</style><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 de td http://www.knowsky.com/
.tb{diseño de tabla: fijo}
</estilo><table class="tb" ancho=80>
<tr>
<td ancho=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table> Efecto: Ambos tds se ajustan normalmente 3. (navegador Firefox) Cuando use el porcentaje para fijar el tamaño de td, use los estilos table-layout: fijo y nowrap, y use diveg.<style>
.tb {diseño de tabla: fijo}
.td {desbordamiento: oculto;}
</estilo><table class=tb ancho=80>
<tr>
<td ancho=25% clase=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td clase=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 ajustar el contenido del contenedor en FF. Solo puede usar el desbordamiento para ocultar el extra. contenido para evitar afectar el efecto general)
