Multiline Ellipses (without using webkit) with tooltip

Question

I have a block with dynamic height and width and text inside. The text is two lines of different length. I need to show the ellipsis only on the last line entering the block and in this case also show the tooltip. If the text is completely included in the block - you don't need to show the tooltip. If the line doesn't fit in width, it should be moved to the next line (if the block height allows it).

Right now I have everything working through use

 textOverflow: ellipsis,
 overflow: hidden,
 whiteSpace: nowrap

and comparison "offsetWidth" and "scrollWidth" to output the tooltip, but the ellipses are put on each of the two lines (if they don't fit width-wise). I have tried using the "word-break" / "overflow-wrap" options for line breaks, but they do not work with "whiteSpace: nowrap".

Examples of what I need:

+--------------------+
|first line          |
|second line         | /* no ellipsis, no tooltip
+--------------------+

+--------------------+
|f  i  r  s  t   l   |
|i  n  e             |
|s  e  c  o  n  d  l |
|i  n  e             | /* no ellipsis, no tooltip
+--------------------+

+--------------------+
|first line          |
|s  e  c  o  n  d ...| /* ellipsis with tooltip
+--------------------+

+--------------------+
|f  i  r  s  t   l   |
|i  n  e ...         | /* ellipsis with tooltip
+--------------------+

I looked through several threads with possible ways to implement this task without using webkit:

1. Applying an ellipsis to multiline text
2. With CSS, use "..." for overflowed block of multi-lines

But nothing really fits (almost everywhere you need to specify the number of lines on which the ellipsis will be located, and I have an unknown number of lines and depends on the height of the block)

Perhaps someone has a working solution to this problem?

Answer 1

You can do this with container queries. Adjust the line clamping behavior according to the height of your container.

Try resizing the blue box in the demo below.

 .wrapper { container-type: size; resize: both; overflow: hidden; width: 8em; height: 4em; background: #cff; line-height: 1.4; }.line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } /* Room for 3 lines */ @container (min-height: calc(3 * 1.4em)) {.line:nth-child(odd) { -webkit-line-clamp: 2; } } /* Room for 4 lines */ @container (min-height: calc(4 * 1.4em)) {.line:nth-child(even) { -webkit-line-clamp: 2; } } /*... keep adding container queries as needed for additional height */

 <div class="wrapper"> <div class="line">First line ut perspiciatis unde omnis iste natus!</div> <div class="line">Second line enim ipsam voluptatem quia voluptas sit aspernatur!</div> </div>

Note: as of this writing, Firefox and some other browsers do not yet support container queries.