How can I make the cell of an html table occupy the length of a text and not cut into pieces?
You can use white-space: pre-line o white-space:pre-wrap
like this:
<table class="espacios">
<tr>
<td>FOLIO METPAB-19215</td>
<td>FOLIO METPAB-19215</td>
</tr>
</table>
and in the css:
.espacios{
white-space: pre-wrap;
}
or
.espacios{
white-space: pre-line;
}
Use a combination of overflow: hidden
, white-space:nowrap;
and last text-overflow: ellipsis
to indicate continuation of text.
You must specify a column width with max-width
so that the table does not stretch all the way.
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>