Cut off text to the last word if longer than table cell width

Question

I have a fixed width td. The text inside should not wrap to the second line. If the text is longer than the cell's width, it should cut off to the last word. If it doesn't have space and cannot break to the last word, it should break with the max width of the cell.

For this example https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap, I want the cell to only have the word, "This paragraph contains a ".

I have a feeling it's some combination of word-break and white-space : no-wrap but I can't get it to work.

Are you looking for something like overflow-x: hidden? Or even overflow-x: shown? — Sam Gurdus, Oct 09 '17 at 18:15
you may try **text-overflow: ellipsis;** it will put *...* in the end of our text — Liaqat Saeed, Oct 09 '17 at 18:27

score 1 · Answer 1 · answered Oct 09 '17 at 18:22

Can you set the height? If you do that and hide the overflow it should show only what you want.

p.test {
    width: 11em; 
    border: 1px solid #000000;
    word-wrap: break-word;
    overflow: hidden;
    height: 1em;
}

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

Liaqat Saeed · Answer 2 · 2017-10-09T18:39:24.937

1

Try using Html

<div>
This is my div and it has some fixed width only allow text to show in one line
</div>

CSS

   div{
  width: 120px;
  color :black;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Working fiddle here

edited Oct 09 '17 at 18:39

answered Oct 09 '17 at 18:28

Liaqat Saeed

428
5
17

Cut off text to the last word if longer than table cell width

2 Answers2

Linked