¿Cómo hacer que la línea china se ajuste automáticamente 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 pueden envolver automáticamente según el tamaño del contenedor. ¡Aquí se explica
cómo envolverlos con CSS!
Para div
1. (navegador IE) white-space:normal;
word-break:break-all;
#wrap{white-space:normal;
ancho:200px;
}
o
#wrap{word-break:break-all;width:200px;}
ddd1111111111111111111111111111111111
Efecto: se puede lograr un ajuste de línea
2. ) 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, pero por supuesto no. barras de desplazamiento. ¡El efecto es mejor!
#wrap{white-space:normal;
ancho:200px;
overflow:auto;}
o
#wrap{word-break:break-all;width:200px;
overflow:auto;
}
ddd1111111111111111111111111111111111111111
Efecto: el contenedor es normal y el contenido está oculto
Para la tabla
1.
(navegador IE) use el estilo de diseño de tabla: fijo;
p>.tb{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
Efecto: son posibles saltos de línea
2. (navegador IE) Utilice estilos table-layout:fixed y nowrap
.tb
{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
Efecto: puede ajustar líneas
3.
(navegador IE) use el estilo diseño de tabla: fijo cuando se usa el porcentaje para corregir el tamaño de td con nowrap
.tb{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
abcdefghigklmnopqrstuvwxyz
1234567890
Efecto: Ambos tds se ajustan normalmente
4. (navegador Firefox) Cuando use el porcentaje para fijar el tamaño del td, use el diseño de tabla de estilos: fix y nowrap, y use div
.tb
{table-layout:fixed}
.td
{overflow:hidden ;}
abcdefghigklmnopqrstuvwxyz
1234567890
abcdefghigklmnopqrstuvwxyz
1234567890
El ancho de celda aquí debe definirse como un porcentaje
Efecto: 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 contenido adicional y evitar afectar el efecto general)