Break text into three lines with overflow

Question

Let's say I have this text:

"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

And I want to display it with specified width and line count(3) like that:

aaaaaaaa
aaaaaaaa
aaaaa...

How can I achieve this?

Possible duplicate of [With CSS, use "..." for overflowed block of multi-lines](http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) — Lalji Tadhani, Sep 20 '16 at 07:07

score 1 · Answer 1 · answered Sep 20 '16 at 07:00

1

css:

<style>
p.text {
/* your costume with & height*/
    width: 11em;
    max-height: 3.6em;
    line-height: 1.8em;
    border: 1px solid #000000;
    word-wrap: break-word;

}
</style>

answered Sep 20 '16 at 07:00

Denny Sutedja

538
4
15

score 1 · Accepted Answer · answered Sep 20 '16 at 07:02

1

Html Code:

<div class="parent">  
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabdbdbdfbdbdbdfbdbdsb
</div>

Css Code:

.parent{width:100px;word-break:break-all;}

Jsfiddle:-

https://jsfiddle.net/Dhavalr/apzy68vp/1/

answered Sep 20 '16 at 07:02

dhaval raythatha

84
3

How can I limit this to 3 lines? – – Krzysztof Majewski Sep 20 '16 at 08:37
Then you can use js for restricting some amount of characters and then ellipsis. There is webkit property to show only 3 lines in chrome display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; – dhaval raythatha Sep 20 '16 at 08:58
Ok. It works fina on chrom. Is there a property for other browsers? – Krzysztof Majewski Sep 20 '16 at 09:07

Break text into three lines with overflow

2 Answers2