2

I have a div that contains 2 "heading" style texts and 2 paragraph style texts. I would like the second paragraph style text to end with an ellipsis should it be too large. The div is a set size, but the length of each paragraph could be different. Example image as follows

example image of the div with different potential outcomes

How can I accomplish this? I am aware of the line-clamp css setting, but the line numbers are variable.

Note: this is being built for a PDF that is paper sized, so that's the reason why the length is set. Also note that weasyprint, the PDF builder, generates from HTML and CSS without the use of JS.

Note 2: It is not a duplicate of questions that ask for exact number of lines. Clamping on 4 lines is already understood by me. It is the fact that the div has a set height with multiple different p tags of which two have a varying height.

Timothy James
  • 1,062
  • 13
  • 25
  • Does this answer your question? [Applying an ellipsis to multiline text](https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text) – Justinas Sep 16 '22 at 19:35
  • @Justinas I don't see how it does, no. If it truly does, I must be missing it. Can you explain better? – Timothy James Sep 16 '22 at 19:42
  • This may be a good solution. https://stackoverflow.com/a/11833858/5245420 – Timothy James Sep 16 '22 at 19:48
  • It's the `webkit-line-clamp` property, just set it to the number of vertical lines you want to limit ellipsis to, 2 or 3, etc[.](https://semicolon.dev/stackoverflow/question/17/how-to-add-vertical-ellipsis-on-2nd-or-3rd-text-line-with-display-webkit-box-and-line-clamp) – InfiniteStack Aug 10 '23 at 23:55

0 Answers0