块级别相当于文本溢出：省略号

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.

Answer 1

Try this Fiddle not mine

or there is the dotdotdot plugin

Answer 2

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.

Answer 3

remove css

 white-space:nowrap;

and set a height to your div