Restricting text in two lines using css only with showing "..." if text comes outside

Question

this is an HTML code (css places in here) that displays only text that is inside the div. The text that is ouside the dive looks truncated which is perfect.

<div style="height:40px;overflow:hidden;width:260px; border:1px solid red;">
 a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>

The question is: is it possible to show at the end of the truncated text "..." ? So, if text is not truncated and fits that div, no ... is displayed, otherwise displayed "...".

jsFiddle preview is available here

CSS only - is it possible? Thank you.

Possible dup: http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines — Salman A, Feb 03 '15 at 13:18

Sridhar DD · Accepted Answer · 2015-02-03T13:21:45.740

3

You can use CSS like below achieve the result you need.

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

Working example text-overflow

edited Feb 03 '15 at 13:21

answered Feb 03 '15 at 13:15

Sridhar DD

1,972
1
10
17

May i know the reason for the down vote? please explain the issue in my solution. – Sridhar DD Feb 03 '15 at 13:21
1

I think it was because you did not specified that your solution only works on a solo line, you should add `white-space: nowrap;` to put it work. – Patrick Ferreira Feb 03 '15 at 13:22
@Haradzieniec:: Sorry. I didnt mention you. But the solution will work. You can see the working example. Mark it answer if it is correct. – Sridhar DD Feb 03 '15 at 13:23
Showing in two lines is not possible with CSS. – Sridhar DD Feb 03 '15 at 14:06

Restricting text in two lines using css only with showing "..." if text comes outside

1 Answers1