Question

158

text-overflow ellipsis without white-space: nowrap?

rated 0 times [ 159] [ 1] / answers: 1 / hits: 25040 / 11 Years ago, mon, june 10, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

aileent questions

1 Next.js, getStaticProps not working with component but does with page

Tue, Mar 1, 22, 00:00, 2 Years ago

1 Why am I getting Failed to load extension. Invalid value for 'content_security_policy'?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 Laravel livewire model is not working when updating input field from javascript?

Sun, Nov 29, 20, 00:00, 4 Years ago

1 How to get Input field type as props in react typescript

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Native Render error missing semicolon

Fri, May 8, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jazlynnessencec · Accepted Answer

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.