Two line of text and overflow is dotted

Question

Is there any way to display text in two line and overflow is dotted? I can use

white-space: nowrap;
text-overflow: ellipsis;

But it show the text in one line. I need to show my text in two line and if overflow text then it should show dotted end.

This may help: https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines?rq=1 — Katherine Huang, Jun 04 '17 at 04:48

Victor Leontyev · Accepted Answer · 2017-06-04T05:38:24.143

2

Working CSS solution for Chrome, Safari and Opera is:

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

You can change 2 to any number. It will show X number of text and dots at the end

line-clamp is not supported by all browsers. https://caniuse.com/#search=line-clamp

edited Jun 04 '17 at 05:38

answered Jun 04 '17 at 05:02

Victor Leontyev

Is there any solution for firefox?? – Md. Shougat Hossain Jun 04 '17 at 05:26
As I know there is no elegant and pure CSS solution for FF. It can be something like this https://codepen.io/romanrudenko/pen/ymHFh – Victor Leontyev Jun 04 '17 at 05:32
@VictorLeontyev You must have also included the browser support for line-clamp. – frnt Jun 04 '17 at 05:37

score 0 · Answer 2 · answered Jun 04 '17 at 04:49

0

At css set width of element, white-space to pre

div  {
  font-size: 1em;
  display: inline-block;
  width: 2em;
  white-space: pre;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div>lines of 
breaks</div>

answered Jun 04 '17 at 04:49

guest271314

score 0 · Answer 3 · answered Jun 04 '17 at 04:56

0

Remove White-space Property and use a height of the element

answered Jun 04 '17 at 04:56

S.M. Shakil

3 Answers3