CODEWITHSUNDEEP
htmlcss
boo-urns
boo-urns

Reputation: 10376

How to make text-overflow with ellipsis work with long strings that have no breaks

I set up a webpage like the one detailed here: http://alistapart.com/article/holygrail (An example can be found here: http://alistapart.com/d/holygrail/example_4.html)

My problem (which may sound contrived and if that bothers you, let's take this as a fun exercise in CSS) is that if you take out all the spaces and any other characters that allow a string to break, the text will overflow or get hidden behind the right column:

enter image description here

The ideal solution is to put an ellipsis whenever that happens so that the user knows that there's text being hidden. (Note that I don't want to force breaking between letters because the rest of the paragraph has normal-sized strings that should break on spaces or punctuation.)

I can't seem to get text-overflow to work anywhere. The best I can do, it seems, is to just apply overflow: hidden but that's a severely less-than-ideal solution.

Can anyone show me (using CSS only, hopefully. I'm not interested in doing text calculations in JavaScript) how I might be able to add an ellipsis for this particular problem?

Upvotes: 0

Views: 1123

Answers (1)

Vikram Jakkampudi
Vikram Jakkampudi

Reputation: 512

Try this css

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

Upvotes: 4

Related Questions