Ajustar texto en la etiqueta <td>


136

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.


1
¿Qué HTML estás usando? ¿es <td> algún texto ... </td> o su TD contiene un <p> o <span>? Además, cuando dice que no se está ajustando, ¿supongo que está viendo que el TD se expande en ancho cuando el texto es más largo que "15%" del ancho de las tablas?
scunliffe

Mi HTML tiene <td> texto dinámico .. </td> y lo que presume sobre la expansión de TD es absolutamente correcto.

Respuestas:


221

Para ajustar el texto de TD

Primer estilo de mesa

table{
    table-layout: fixed;
}

luego configure TD Style

td{
    word-wrap:break-word
}

55
Supongo que no se accede porque no funciona en Chrome ... :-( ¿Alguna solución para webkit?
MarcoS

44
Me funcionó perfectamente en Chrome.
Alejandro Riedel

17
Interesante ... En Chrome, tuve que usar white-space: normalel estilo td para que la envoltura funcionara (en lugar de word-wrap:break-word)
Jim

3
Puedo confirmar que tuve la misma experiencia con la respuesta de Jim. Por alguna razón, Chrome no responde sin elwhite-space:normal;
petrosmm

1
Úselo white-space: pre-wrapsi necesita preservar el espacio en blanco.
eicksl

47

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.


77
He intentado esta solución, pero no parece estar funcionando en Chrome. Tengo una tabla que se llena dinámicamente con un hipervínculo que tiene más del doble del ancho de la celda. 'table-layout: fixed' resuelve el problema con el estiramiento de la tabla, pero no ajusta el texto; en cambio, continúa extendiéndose a la derecha de la página. ¿Me estoy perdiendo de algo?
VOIDHand

30

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 .


Tengo en ambos sentidos. Pero no puede ajustar el texto. Estoy usando IE6.0

1
ah, IE6. Esto agrega complejidad. Revisaré mi respuesta con un hack de IE6.
scunliffe

11

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>


9

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

8

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>


3

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.


1
Es posible que haya querido usar CSS en su lugar, pero los estilos en línea generalmente se evitan en HTML moderno, especialmente si está repitiendo los mismos estilos una y otra vez para cada div copiado.
TankorSmash

3

Tuve algunos de mis tds con:

white-space: pre;

Esto lo resolvió para mí:

white-space: pre-wrap;

2

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/


1

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.


1

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


Esto es correcto. No puedo entender por qué la gente sugiere usar "white-space: nowrap", ya que eso hará exactamente lo contrario de lo que quiere el OP.
mluisbrown

29
no corrija ninguna palabra en inglés que sea tan larga, pero supongamos que estoy mostrando una ruta de archivo, que será continua y muy larga.
krisp

2
O una larga lista de números separados por comas, por ejemplo, que desafortunadamente no tienen espacios.
Aditya Sanghi

44
.. O un nombre de dominio largo que puede ir hasta 63 caracteres (extensión y www excluidos) http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
Brainfeeder

Estoy tratando de resolver este problema cuando la "palabra" es una URL muy larga. El comentario anterior con el ejemplo "ggggggggggggggggggggggggggggggggggggggggggggggg" no tiene en cuenta las URL largas.
geekandglitter

0

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>

Creo que el OP, aunque no lo dice explícitamente, está teniendo problemas para envolver contenido dinámico sin espacios. En este caso, la solución anterior no funcionará - jsfiddle.net/qZrFW
user66001

-1
<!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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.