CODEWITHSUNDEEP
htmlcssellipsis
Stranger
Stranger

Reputation: 25

Multiline Ellipses (without using webkit) with tooltip

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?

Upvotes: 1

Views: 378

Answers (1)

mfluehr
mfluehr

Reputation: 3207

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.

Upvotes: 0

Related Questions