Block level equivalent of text-overflow:ellipsis

Question

I want to offer small blurbs that will disappear into ellipsis if they are too long for the container div they are put into. I would like to offer a visual indication that there is more text if a user follows the link to the article. I don't want to use an ellipse image, but I can use jQuery if required. My preference is to do it entirely in CSS3, if possible.

I found the text-overflow:ellipsis property / value, combined with overflow:hidden and white-space:nowrap allow for a single-line version of this, but what about multi-lines? vs. in my case.

Will these, or another property / value pair allow for this to be done in strictly CSS?

Any help is appreciated.

do you want every line of text to finish with an ellipsis?, so render a paragaph, but clip it? — web_bod, May 16 '12 at 22:14
Sounds a bit like this question: http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe — web_bod, May 16 '12 at 22:20
Should I use a paragraph for a div this small? I was planning on just using a `
Enjoy this other stuff that I have enticed you to read based on other items you seem to have enjoyed
`. I would expect this to render out as : **Enjoy this other stuff that I have enticed you to read based on other items you seem...** without the need for paragraphs inside the div. Bad form? Bad practice? — Jon Mitten, May 16 '12 at 23:43
possible duplicate of [Insert ellipsis (...) into HTML tag if content too wide](http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide) — bfavaretto, May 29 '12 at 01:35
Multiline isn't supported. You will need javascript to support this. See question: [http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines](http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) — Community Driven Business, May 16 '12 at 22:19
paragraph tag is in-line, not block. I need multi-lines ending in ellipsis. — Jon Mitten, May 16 '12 at 23:04
multiline is supported, it bc of the white-space:nowrap in the css alongside having no height on the overflow:hidden div — Rob Sedgwick, May 17 '12 at 07:06

score 3 · Accepted Answer · answered May 16 '12 at 22:22

3

Try this Fiddle not mine

or there is the dotdotdot plugin

answered May 16 '12 at 22:22

web_bod

5,728
1
17
25

The dotdotdot plugin satisfies this question - and it works. Now if I can get it to expand vertically as well as horizontally it would be perfect. Thanks for the tip! – Jon Mitten Jun 26 '12 at 18:16

score 0 · Answer 2 · answered May 16 '12 at 22:23

Given HTML mark-up along the following lines:

<div class="multiline"><!-- long string of text... --></div>

<div class="singleline"><!-- long string of text... --></div>

And the following CSS:

div {
    /* aesthetic stuff, such as width, max-width, border, line-height etc... */
    overflow: hidden; /* required to hide the overflow */
    position: relative;  /* required to position the pseudo-element */
}
div.multiline {
    max-height: 12em; /* defines the 'overflow point' */
}
div.singleline {
    max-height: 1.5em;
}
div::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2em;
    text-align: center;
    background-color: #fff;
}

JS Fiddle demo.

While this broadly achieves your intent, in compliant browsers, it does have the problem of not lining up the generated 'ellipsis' with the end of the visible text, unfortunately.

This works, but it also puts ellipsis unconditionally, even when the text doesn't overflow. Text doesn't always overflow for these. But, yes, this is a very good solution for non-conditional versions of this problem. — Jon Mitten, May 16 '12 at 23:24
@JonMitten - With all due respect, it's not a good solution, **at all**. I'm sure David did his best here, but the famous celebrity that is CSS3, `` is so good that it doesn't need to be flexible ``. — Christian, May 22 '12 at 08:05

score 0 · Answer 3 · answered May 16 '12 at 22:25

0

remove css

 white-space:nowrap;

and set a height to your div

answered May 16 '12 at 22:25

Rob Sedgwick

5,216
4
20
36

Set a height, or a max-height? – Jon Mitten May 16 '12 at 22:45
to prove the point, try height for now .. the main problem ( only 1 line of text) was due to white-space:nowrap; - the height is set because you need 'something' when you have overflow:hidden. – Rob Sedgwick May 16 '12 at 22:59

Block level equivalent of text-overflow:ellipsis

3 Answers3