html - content - wrap css
HTML wrap wrap text (12)
Aplique las clases a sus TD, aplique los anchos apropiados (recuerde dejar uno de ellos sin ancho para que asuma el resto del ancho), luego aplique los estilos apropiados. Copie y pegue el código siguiente en un editor y visualícelo en un navegador para ver cómo funciona.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftcolumn">This is the left column. It is set to 20% width.</td>
<td class="centercolumn">
<p>Hi,</p>
<p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
<p>Need help.</p>
<p>TIA.</p>
</td>
<td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
</tr>
</table>
</body>
</html>
Quiero envolver un texto que se agrega al TD. Lo he intentado con style="word-wrap: break-word;" width="15%" style="word-wrap: break-word;" width="15%" . Pero la envoltura no está sucediendo. ¿Es obligatorio dar el 100% de ancho? Tengo otros controles para mostrar, por lo que solo está disponible el 15% de ancho.
Creo que te has encontrado con la captura 22 de tablas. Las tablas son geniales para completar el contenido en una estructura tabular y hacen un trabajo maravilloso de "estiramiento" para satisfacer las necesidades del contenido que contienen.
De forma predeterminada, las celdas de la tabla se estirarán para ajustarse al contenido ... por lo tanto, su texto simplemente lo amplía.
Hay algunas soluciones.
1.) Puede intentar establecer un ancho máximo en el TD.
<td style="max-width:150px;">
2.) Puedes intentar poner tu texto en un elemento de envoltura (por ejemplo, un lapso) y establecer restricciones sobre él.
<td><span style="max-width:150px;">Hello World...</span></td>
Tenga en cuenta que las versiones anteriores de IE no admiten min / max-width.
Dado que IE no admite el ancho máximo de forma nativa, necesitarás agregar un truco si quieres forzarlo. Hay varias formas de agregar un truco, este es solo uno.
En la carga de página, solo para IE6, obtenga el ancho renderizado de la tabla (en píxeles), luego obtenga 15% de eso y aplique eso como el ancho al primer TD en esa columna (o TH si tiene encabezados) nuevamente, en píxeles .
En realidad, el ajuste del texto ocurre automáticamente en las tablas. Las personas que cometen errores se comprometen mientras las pruebas hipotéticamente suponen una cadena larga como "ggggggggggggggggggggggggggggggggggggggggggggggg" y se quejan de que no se ajusta. Prácticamente no hay una palabra en inglés que sea así de larga e incluso si la hay, hay una pequeña posibilidad de que se use dentro de esa <td> .
Prueba con oraciones como "Contraposicionar es supersticioso en circunstancias predeterminadas".
Es posible que esto funcione, pero podría ser un poco molesto en algún momento en el futuro (si no inmediatamente).
<style>
tbody td span {display: inline-block;
width: 10em; /* this is the nuisance part, as you''ll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
overflow: hidden;
white-space: nowrap; }
</style>
...
<table>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>
<tr>
<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>
</tr>
</tbody>
</table>
El razonamiento para el span es que, como han señalado otros, un <td> generalmente se expandirá para acomodar el contenido, mientras que un <span> se le puede dar -y se espera que lo mantenga- un ancho fijo; el overflow: hidden tiene como objetivo ocultar, pero no ocultar, lo que de lo contrario haría que <td> expandiera.
Recomiendo usar la propiedad del title del tramo para mostrar el texto que está presente (o recortado) en la celda visual, de modo que el texto aún esté disponible (y si no quiere / necesita personas para verlo, entonces ¿por qué en primer lugar, supongo ...).
Además, si defines un ancho para el td {...} el td se expandirá (o potencialmente se contraerá, pero lo dudo) para llenar su ancho implícito (como yo lo veo, esto parece ser table-width/number-of-cells ), un ancho de tabla especificado no parece crear el mismo problema.
La desventaja es el marcado adicional utilizado para la presentación.
Esto funcionó para mí con algunos marcos CSS (material design lite [MDL]).
table {
table-layout: fixed;
white-space: normal!important;
}
td {
word-wrap: break-word;
}
Esto funciona realmente bien:
<td><div style = "width:80px; word-wrap: break-word"> your text </div></td>
Puede usar el mismo ancho para todos sus <div , o ajustar el ancho en cada caso para dividir su texto donde desee.
De esta forma, no tiene que perder el tiempo con anchos de tabla fijos o css complejos.
Las tablas HTML admiten un estilo CSS "de diseño de tabla: fijo" que evita que el agente de usuario adapte el ancho de las columnas a su contenido. Es posible que desee usarlo.
Para envolver texto TD
Primer conjunto de estilo de tabla
table{
table-layout: fixed;
}
luego configura el estilo TD
td{
word-wrap:break-word
}
Para que el ancho de celda sea exactamente igual a la palabra más larga del texto, simplemente configure el ancho de la celda en 1px
es decir
td {
width: 1px;
}
Esto es experimental y me enteré de esto mientras hacía prueba y error
Violín en vivo: http://jsfiddle.net/harshjv/5e2oLL8L/2/
table-layout:fixed resolverá el problema de celda en expansión, pero creará uno nuevo. IE de forma predeterminada ocultará el desbordamiento, pero Mozilla lo representará fuera del cuadro.
Otra solución sería usar: overflow:hidden;width:?px
<table style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
<td>
test
</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Poem</th>
<th>Poem</th>
</tr>
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
.tbl {
table-layout:fixed;
border-collapse: collapse;
background: #fff;
}
.tbl td {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
Créditos a http://www.blakems.com/archives/000077.html