Ajustar texto en la etiqueta <td>

Quiero ajustar un texto que se agrega a un <td>elemento. He tratado con style="word-wrap: break-word;" width="15%". Pero no está envolviendo el texto. ¿Es obligatorio darle un ancho del 100%? Tengo otros controles para mostrar, por lo que solo el 15% de ancho está disponible.

Para ajustar el texto de TD

Primer estilo de mesa

table{
    table-layout: fixed;
}

luego configure TD Style

td{
    word-wrap:break-word
}

Las tablas HTML admiten un estilo css "table-layout: fixed" que evita que el agente de usuario adapte los anchos de columna a su contenido. Es posible que desee usarlo.

Creo que has encontrado la trampa 22 de las mesas. Las tablas son excelentes para envolver contenido en una estructura tabular y hacen un trabajo maravilloso de "estiramiento" para satisfacer las necesidades del contenido que contienen.

Por defecto, las celdas de la tabla se estirarán para ajustarse al contenido ... por lo tanto, su texto solo lo ensancha.

Hay algunas soluciones.

1.) Puede intentar establecer un ancho máximo en el TD.

<td style="max-width:150px;">

2.) Puede intentar poner su texto en un elemento de ajuste (por ejemplo, un espacio) y establecer restricciones en él.

<td><span style="max-width:150px;">Hello World...</span></td>

Sin embargo, 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, deberá agregar un truco si desea forzarlo. Hay varias formas de agregar un hack, esta es solo una.

En la carga de la página, solo para IE6, obtenga el ancho renderizado de la tabla (en píxeles), luego obtenga el 15% de eso y aplíquelo como el ancho al primer TD en esa columna (o TH si tiene encabezados) nuevamente, en píxeles .

table-layout:fixedresolverá el problema de expansión de la celda, pero creará uno nuevo. IE por defecto ocultará el desbordamiento pero Mozilla lo renderizará fuera de la caja.

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>

.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

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;
}

Uso word-breakque se puede utilizar sin peinar tableatable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}

<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

Esto funciona muy bien:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

Puede usar el mismo ancho para todos sus <div's, o ajustar el ancho en cada caso para dividir su texto donde quiera.

De esta manera, no tiene que perder el tiempo con anchos de tabla fijos o css complejos.

Tuve algunos de mis tds con:

white-space: pre;

Esto lo resolvió para mí:

white-space: pre-wrap;

Para hacer que el ancho de la 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 llegué a saber sobre esto mientras hacía prueba y error

Violín en vivo: http://jsfiddle.net/harshjv/5e2oLL8L/2/

Es posible que esto funcione, pero podría resultar un poco molesto en algún momento en el futuro (si no de inmediato).

<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>

La razón para esto spanes que, como lo han señalado otros, a <td>se expandirá típicamente para acomodar el contenido, mientras que a <span>se le puede dar -y se espera que mantenga- un ancho establecido; El overflow: hiddenobjetivo es ocultar, pero puede que no, lo que de otro modo causaría la <td>expansión.

Recomiendo usar la titlepropiedad del span para mostrar el texto que está presente (o recortado) en la celda visual, de modo que el texto todavía esté disponible (y si no quiere / necesita que la gente lo vea, entonces ¿por qué tenerlo? en primer lugar, supongo ...).

Además, si define un ancho para el td {...}td se expandirá (o potencialmente se contraerá, pero lo dudo) para llenar su ancho implícito (como lo veo, parece ser table-width/number-of-cells), un ancho de tabla específico no parece crear El mismo problema.

La desventaja es el marcado adicional utilizado para la presentación.

En realidad, el ajuste del texto ocurre automáticamente en las tablas. El error que cometen las personas durante las pruebas es asumir hipotéticamente una cadena larga como "ggggggggggggggggggggggggggggggggggggggggggggggg" y quejarse de que no se ajusta. Prácticamente no hay una palabra en inglés que sea tan larga e incluso si la hay, existe una leve posibilidad de que se use dentro de eso <td>.

Intente probar con oraciones como "La contraposición es supersticiosa en circunstancias predeterminadas".

Aplique 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 a continuación en un editor y véalo en un navegador para verlo funcionar.

<!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>

<!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>