Trying to add ellipsis after the second line using sass/css?

Question

In the jsfiddle link you can find what I tried out, however when the text goes over two lines, I do not see the ellipsis anymore. Can somebody help me out. Im new to CSS, and what to solve this problem using CSS/SASS only.

.exciting-text {
  display: block;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 2em;
  line-height: 1em;
}
.exciting-text::after {
  content: "...";
  color: red;
}

<p class="exciting-text">Contributing to MDN is easy and fun.Just hit the edit button to add new live samples, or improve existing samplesdfsfssfddcdxcxdsdzxfsfdsadasdaddsadsadsadsadsadasdasfds.</p>

Sorry, I should have done it to this question: http://stackoverflow.com/questions/6572330/is-it-possible-to-use-text-overflowellipsis-on-multiline-text but if you actually put a bit of effort in and googled this, you would have come across this code pen: http://codepen.io/martinwolf/pen/qlFdp — Pete, Jan 19 '17 at 14:14
@pete, this example uses webkit, which I am trying to avoid at all cost, is there a way without using webkit and thanks for the link — JAY NATHAN, Jan 19 '17 at 14:18
not really - all the examples I have seen are either webkit, opera, js or server side truncation — Pete, Jan 19 '17 at 14:21

score 0 · Answer 1 · answered Jan 19 '17 at 14:14

0

In current example your problem is max-height. Get rid of it and your pseudo ellipsis will be visible at all times.

answered Jan 19 '17 at 14:14

Serg Chernata

12,280
6
32
50

hey thanks for the answer, however i want to limit the text to two lines – JAY NATHAN Jan 19 '17 at 14:17

Trying to add ellipsis after the second line using sass/css?

1 Answers1