<body style="dirección: ltr;" leftmargin="2" topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy ="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" marginheight="0" marginwidth="0">El programa para eliminar la copia con clic derecho.
Este artículo presenta
.cómo usar CSS para hacer que el texto en inglés se ajuste automáticamente. 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. ¡Así es como CSS puede ajustarlos automáticamente!
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. ¡Así es como CSS puede ajustarlos automáticamente! Para Div y tabla y diferentes navegadores, los métodos para implementar el ajuste automático de líneas CSS son ligeramente diferentes. Los siguientes se presentan por separado:
Para div
1. (navegador IE) white-space:normal:break-all; el primero Sigue el estándar:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [www.52css.com]
#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 ajuste de línea automático
2. (navegador Firefox) white-space:normal; word-break:break-all;overflow:hidden tampoco está disponible en el; mismo FF Un método de implementación muy bueno. Solo puedes ocultar o agregar barras de desplazamiento. ¡Por supuesto, el efecto es mejor sin agregar barras de desplazamiento!
div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com]
#wrap{espacio en blanco:normal; ancho:200px; desbordamiento:auto;}
O:
#wrap{word-break:break-all;ancho:200px;
<div id="wrap">ddd11111111111111111111111111111111111111</div>
Efecto: el contenedor es normal y el contenido está oculto
http://font.knowsky.com/
Para la tabla
1. (navegador IE) use el estilo table-layout:fixed:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [www.52css.com]
<estilo>
.tb{diseño de tabla: fijo}
</estilo>
<tabla clase="tbl" ancho="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Efecto: ajuste automático de línea
2. (navegador IE) use estilo:
div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com]
<estilo>
.tb {diseño de tabla: fijo}
</estilo>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Efecto: ajuste de línea automático
3. (navegador IE) Utilice el estilo table-layout:fixed y nowrap cuando utilice porcentaje para fijar el tamaño td:
div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com ]
<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>
</table>
Efecto: Ambos tds se ajustan automáticamente normalmente
4. (navegador Firefox) Use el diseño de tabla de estilo: fijo y nowrap cuando use porcentaje para fijar el tamaño del td, y use div:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [www.52css.com]
<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.