¿Como puedo hacer para que la celda de una tabla html ocupe el largo de un texto y no se corte en pedazos ?
2 respuestas
Usa una combinación de overflow: hidden
, white-space:nowrap;
y por último text-overflow: ellipsis
para indicar continuación de texto.
Debes especificar un ancho de columna con max-width
para que la tabla no se estire a todo lo largo.
td {
max-width: 250px;
font-size: 40px;
border: solid 2px gray;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<table>
<tr>
<td>
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
</td>
<td>
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
</td>
</tr>
</table>
Puedes usar white-space: pre-line o white-space:pre-wrap
así:
<table class="espacios">
<tr>
<td>FOLIO METPAB-19215</td>
<td>FOLIO METPAB-19215</td>
</tr>
</table>
y en el css:
.espacios{
white-space: pre-wrap;
}
o
.espacios{
white-space: pre-line;
}
white-space: pre-wrap
owhite-space:nowrap