How can I hide a text inside a table cell after line break?

Question

I want to hide the text inside a table cell after line break and put three points behind it. But I cannot make it run:

<table border="1" style="width:100%">
  <tr>
    <td style="width:200px; overflow:hidden;height:5px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    <td style="width:200px; overflow:hidden;height:5px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> 
  </tr>
</table>

The text I imagine inside the table cells should be in this example only:

Lorem ipsum dolor sit amet, consetetur...

I can also imagine to just limit the cell to for example 200 characters — peace_love, Jun 16 '16 at 07:16
Add to td td { text-overflow: ellipsis; display: table-caption; white-space: nowrap; } — Shivani, Jun 16 '16 at 07:18
Hm, it is working in this example, but not in my code, I will check it out... — peace_love, Jun 16 '16 at 07:21

score 1 · Accepted Answer · answered Jun 16 '16 at 07:49

Is it possible for you to set the height of the table to a fixed value? Is it possible to modify the HTML structure?

If possible, use add div inside your td so the HTML and CSS look like this,

table, td {
  border: 1px solid #000;
}
td div {
  overflow:hidden;
  width:200px;
  height:16px;
  
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tr>
    <td><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></td>
    <td><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></td> 
  </tr>
</table>

Demo click here

Thank you, this is a nice solution. Does it work, when the div is 100%? — peace_love, Jun 16 '16 at 15:09
@Jarla you mean the `div`'s width? No, not really, because we have the `white-space: nowrap`. Is there a reason why you want it to be 100%? — deathlock, Jun 16 '16 at 16:05

score 0 · Answer 2 · answered Jun 16 '16 at 07:36

Found a good solution:

$("td").text(function(index, currentText) {
    return currentText.substr(0, 17);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" style="width:100%">
  <tr>
    <td >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    <td >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> 
  </tr>
</table>

Generally the use of JS to modify visual (presentation) should be avoided if possible. Stick with CSS if you need to modify the presentation. — deathlock, Jun 16 '16 at 07:40

How can I hide a text inside a table cell after line break?

2 Answers2