Cut text off when it has a line break

Question

I am div holding text, I don't want the div to be higher than a certain size or wider than a certain size. I've set the max width and max height on that already. My problem right now is that when the text is so long it gives problems. Is there a way I am able to cut the text off when it has to do a line break?

Edit: I would like two lines of text before the ellipsis start.

SiddAjmera · Answer 1 · 2018-10-28T08:45:12.943

0

It looks like you can either have the text appearing on a single line with the ellipsis or have two lines without ellipsis.

Try this for a single line with an ellipsis:

.overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

OR this for two lines without an ellipsis:

.overflow {
    text-overflow: ellipsis;
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
}

Here's a Sample Fiddle for your ref.

edited Oct 28 '18 at 08:45

answered Oct 28 '18 at 07:41

SiddAjmera

38,129
5
72
110

Thank you so much. This is exactly what I needed! – JoeTheHobo Oct 28 '18 at 07:44
One question though, can I make the text flow to two lines before the ellipsis start? – JoeTheHobo Oct 28 '18 at 07:45
This may not work in all browsers – Shireesha Parampalli Oct 28 '18 at 07:49

score 0 · Answer 2 · edited Oct 28 '18 at 08:25

0

Try this:

.overflow {
  line-height: 1.5em;
  height: 3em;
  overflow: hidden; 
  text-overflow: ellipsis;
}

This will keep your text max up to 2 lines.

edited Oct 28 '18 at 08:25

SiddAjmera

38,129
5
72
110

answered Oct 28 '18 at 08:21

krishna_tandon

395
1
12

Can you convert em to px. I don't understand what em is, is it just another way to measure it? – JoeTheHobo Oct 28 '18 at 08:36
The ellipsis don't work unless I add 'white-space: nowrap;' but then it is only allowing one line of text. – JoeTheHobo Oct 28 '18 at 08:41

Cut text off when it has a line break

2 Answers2