avoid cutting a text in the cell of an html table

0

How can I make the cell of an html table occupy the length of a text and not cut into pieces?

    
asked by Ivxn 29.07.2016 в 18:02
source

2 answers

1

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;
}
    
answered by 29.07.2016 / 18:21
source
1

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>
    
answered by 29.07.2016 в 18:26