<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.
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
The word–wrap property is used to split/break long words and wrap them into the next line. The overflow–wrap CSS property is applicable to inline elements & specifies that the browser can break the line inside the selected element into multiple lines in an otherwise unbreakable place.
Draw a simple rectangle. Your choice of height and width , of the rectangle, will dictate the size and shape of the ellipse. The border-radius refers to the curvature at the corners of the shape; it should be set to a very high value (50% to 100%). An ellipse has been created!
To add an ellipsis in the HTML <span> element having the CSS overflow property set to “hidden”, you need to add the text-overflow property. Use its “ellipsis” value, which will add dots at the end of the content within the <span>. Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
I’ve read online that ideally the input text field should not have support for this property (“text-overflow:ellipsis”), but it would’ve been nicer if there were support for it anyways. I tried and found that FF and Chrome do support it, but IE and Safari don’t.
Same way you can apply for 3 or more lines by modifying the -webkit-line-clamp value. Bootstrap 4 has an inbuilt class for 1 line ellipsis, text-truncate. For multiline text-truncate add a separate style just like the below code.
With an ellipsis, you can omit words, phrases or sentences when you’re quoting. Note: You never want to omit words, phrases or sentences that will change the context or facts of a quote. Additionally, as mentioned above, the intricacies of ellipses will vary by style guide and even publication.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With