1

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?

Stranger
  • 45
  • 6

1 Answers1

0

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.

mfluehr
  • 2,832
  • 2
  • 23
  • 31
  • Great, thanks for the answer! But there are a couple of things: 1) I can't use webkit - properties 2) I don't know the number of lines in advance, since everything depends on the height of the block. If I increase the height of the block in your example, it will still output only 4 lines, even if the last one doesn't fit the width – Stranger Oct 05 '22 at 18:39
  • Despite the name, `-webkit-line-clamp` is available in all modern browsers. That said, container queries have limited browser support, so it may not be practical for your use. You'll have to use JavaScript if you cannot use these CSS features. – mfluehr Oct 05 '22 at 19:10