How to make div ellipsis with multiple paragraphs inside it?

user_12937013 0
Viewed 1814
<div>
 <p>This is a sample text.</p>
 <p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
 <p>This is a last paragraph which is not going to display as 3 lines are already displayed</p>
</div>

required output - 

This is a sample text.
This is a 2nd sample text. existing 
inside a paragraph. I want to make...

I want to make text inside div ellipsis with 3 lines by considering all paragraphs as a single text.
How can I achieve this??

I have tried following one - 

div{
 width: 200px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: initial;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
}
<div>
 <p>This is a sample text.</p>
 <p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
 <p>This is a last paragraph which is not going to display as 3 lines are already displayed</p>
</div>

But it not working properly as expected if there is multiple paragraph inside div.

ellipsis css html
2 Answers

Consider display:contents; on the p elements combined with a pseudo element trick to keep the separation between the p

div {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

div p {
  display: contents;
}

p:after {
  content: "\A";
  white-space:pre;
}
<div>
  <p>This is a sample text.</p>
  <p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
  <p>This is a last paragraph which is not going to display as 3 lines are already displayed</p>
</div>

user_86203330

Using clamp for multiline

fiddle to play-around.

.MainDiv {
  border: 1px solid black;
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.MainDiv p {
  overflow: hidden;
}
<div class="MainDiv">
  <p>This is a sample text.</p>
  <p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
</div>

You can do something like this for single line

.MainDiv {
  border: 1px solid black;
  width: 200px;
}

p {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 200px;
  white-space: nowrap;
}
<div class="MainDiv">
  <p>This is a sample text.</p>
  <p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
</div>

user_35643590
Related