35

I was wondering if there is any clever way, to achieve the css ellipsis effect without the need to apply white-space: nowrap also.

In other words, lets say we have a block element of a certain height and we'd like to let it get filled up with text-content, but the ellipsis should get applied as soon as there is no more room in horizontal plus vertical directions.

Quick example: http://jsfiddle.net/fpv9n/2/

Text should be like it is, but also with an ellipsis at the end. Any way to achieve that using CSS ? I would take JS solutions also into consideration.

Improve this question
2
  • The jquery dotdotdot plugin looks great. Commented Jun 10, 2013 at 16:54
  • Came across Shave which is JS plugin that does multi line text truncation based on a given max-height really well. It uses binary search to find the optimum break point. Definitely worth investigating. Commented Aug 29, 2017 at 9:13

3 Answers 3

Reset to default
33

Update nowdays CSS line-clamp can be used with the latest browsers.

p:first-of-type { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color:#777 }
<h2>Run that snippet to find out if your browser understand this</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <h3>same text below, not clamped.</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
end update

You can fake ellipsis with content:'...' and position:absolute; set height within a numbers of line (add eventually vertical-padding)
http://jsfiddle.net/V3ZQH/

span { background-color: red; width: 100px; /*height: 50px;*/ height:2.4em; display: block; overflow: hidden; text-overflow: ellipsis; /*white-space: nowrap; */ position:relative; padding:0 0.5em; } span:after { content:'...'; background:inherit; position:absolute; bottom:0; right:0; box-shadow:0 0 5px red }
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

no need of span:after if one dislike dots. it's for show purpose since ellipsis is in original CSS. it works without :)
Problem is, the '...' is always shown, even where you have a short text.
This is a cool effect but it shows in the INVERSE of the desired condition. If the text fits, you get ellipses; if the text is too big, you just can't see it.
@Methodician , indeed, it was a 2013 answer , lineclamp works just fine nowdays ;)
supported in all current major browsers caniuse.com/css-line-clamp (as of 2023-04 with -webkit- prefix) and yes, for Firefox, use -webkit- too
30

There is no way to do this using pure CSS. It's monstrous and sad. I've often desired this myself when you want the browser to "ellipsify" a multi-line text with possibly overflowing text whenever it spills out of the container.

Improve this answer

Comments

1

I know only of ugly work arounds involving content, absolute positionings, helper elements holding the dots and padding. I think it is probably best to have your height to be an exact multitude of your line height, for example by doing so:

height: 2em; font-size: 1em; line-height: 1em;
Improve this answer

1 Comment

best is to set line-height around 1.2em (defaut setting usually, no matter the font), and as i advise , include your vertical padding inside .Set vertical padding in em for safety. For the dots, you may remove them and let a blur via box shadow not to break sharp in half a letter . :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.