CSS: Text overflow ellipsis if large than two lines, is it possible?

Question

I have a div with 300px width and 20px height, the text changes randomly in it. I want to show ellipsis only when overflow with 2 lines otherwise as it, using only CSS.

http://jsfiddle.net/7BXtr/272/

HTML:

<div id="container">
            <div class="box">

        <div class="text-body">
            <div class="text-inner">This is the text description of the item.
                It can flow onto more than 2 lines, too,
                if there is room for it, but otherwise
                should only show 1 line.
            </div>
        </div>
    </div>
</div>

CSS:

#container {
    width: 104px;
}
.box {

    max-height: 40px;
    overflow: hidden;

    border: solid 1px red;
    position: relative;
}
.box:after {
    content: '...';
    position: absolute;
    left: 84px;
    bottom: 0;
}
.text-body {
    position: relative;
}
.text-body:before {
    content: '';
    position: absolute;
    left: 80px;
    top: 14px;
    width: 12px;
    height: 2px;
    background: white;
}
.text-inner {
    width: 90px;
    padding-right: 10px;
}

No - this is not possible in CSS unfortunately, you will need a JS solution — SW4
– SW4, Commented May 9, 2014 at 14:59

Zach Saucier · Accepted Answer · 2014-05-09 20:29:30Z

6

You can have a text overflow ellipsis with larger than one line only for Webkit, it is not supported by the other vendors yet

Here's an example with three lines of text with an ellipse example:

.three-line-block {
    line-height: 15px; //for not webkit browser
    max-height: 45px; //for not webkit browser
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

edited May 9, 2014 at 20:29

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

answered May 9, 2014 at 19:20

Alex

11.3k13 gold badges53 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zach Saucier Over a year ago

What do you mean by your comments in the code? Both lines are supported by webkit and other vendors...

Collectives™ on Stack Overflow

CSS: Text overflow ellipsis if large than two lines, is it possible?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related