How to fold a paragraph and replace the rest of the content with '...'?

Question

Well, I have content within a paragraph, maybe like this:

<div style="width:30px">
  <p>12345678901234567890abcdefghijklmnopqrstuvwxyzIlovePaulinaVega</p>
</div>

We all know that the content will be divided into many rows because of its parent's width, but I just want to keep the top 2 rows, the rest is replaced with'...'. I am wondering how to accomplish it .Tell me please.

Here is the similar question, [css-ellipsis-on-second-line](http://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line) — Noopur Dabhi, Oct 12 '15 at 09:04

score 1 · Answer 1 · answered Oct 12 '15 at 08:43

1

p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div style="width:100px">
  <p>12345678901234567890abcdefghijklmnopqrstuvwxyzIlovePaulinaVega</p>
</div>

Add CSS like this:

p{
  text-overflow:ellipsis; 
  white-space:nowrap;
  overflow:hidden;
 }

answered Oct 12 '15 at 08:43

Sandeep Nayak

4,649
1
22
33

I tried this, but I need to keep 2 rows. – Patrickgao91 Oct 12 '15 at 08:46
Add a fixed height if that's allowed. – Shilly Oct 12 '15 at 08:48
@Patrickgao91: what do you means by `rows` here? – Sandeep Nayak Oct 12 '15 at 08:49
Sorry...My English is quite poor... – Patrickgao91 Oct 12 '15 at 08:50
Its just a paragraph text isn't it? or you are planning to do something else/ – Sandeep Nayak Oct 12 '15 at 08:51
I want it on the second line – Patrickgao91 Oct 12 '15 at 09:23
well, the problem for me is that the content within the paragraph may be made up with clutter letters and numbers(for example, 79ryeuriy832rwiueyr823rwiury32riwyr), I didn't find any answer work for this. – Patrickgao91 Oct 12 '15 at 09:55

Andi AR · Answer 2 · 2015-10-12T09:04:27.347

1

Try this

JsFiddle:

http://jsfiddle.net/2zggrdur/1/

CSS:

p {
        line-height: 1.5em;
        height: 3em;
           text-overflow:ellipsis; 
        overflow: hidden;
    }

Specify height property to visible number lines or rows in your paragraph.
text-overflow:ellipsis and overflow:hidden will do hide and 3 dots properties.
Allighn parent width according to paragraph.

edited Oct 12 '15 at 09:04

answered Oct 12 '15 at 08:59

Andi AR

2,678
2
23
28

well, I replaced content within
with 'sssssssssssssssssssssssssssssss...'(however, a lot of ss), It doesn't work... but thank you all the same. I think this problem should be solved with jquery – Patrickgao91 Oct 12 '15 at 09:09

How to fold a paragraph and replace the rest of the content with '...'?

2 Answers2

JsFiddle:

CSS: