text-overflow ellipsis without “white-space: nowrap”? [duplicate]

Answer 1

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.

Answer 2

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
}

Answer 3

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;