CODEWITHSUNDEEP
htmlcsstext
Haradzieniec
Haradzieniec

Reputation: 9340

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

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.

Upvotes: 0

Views: 37

Answers (1)

Sridhar DD
Sridhar DD

Reputation: 1980

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

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

Working example text-overflow

Upvotes: 3

Related Questions