CSS implementation of multi-line text truncation, which hides the remaining text and displays ellipsis.

Due to the internationalization of the developed mobile software, there may be issues with incomplete display or style distortion for minority languages. In such cases, the problem needs to be solved at the style level, such as displaying ellipsis when exceeding one line, which is easily solved and highly compatible.

max-width: 3rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

However, if you want to truncate multiple lines and display ellipsis after exceeding 2 lines of text, it becomes relatively more complicated. Some CSS properties can solve the issue of truncating multiple lines.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

The above code works well in the Chrome browser and meets the actual requirements. However, when running in an app and opening the corresponding webview, it is found that it cannot meet the actual requirements and has many compatibility issues. Therefore, this solution cannot completely solve the requirement. This document provides many solutions for reference.

Complete Guide to Multiline Text Overflow with Ellipsis in Web Development

In actual scenarios, using JavaScript can solve our requirements. However, whether CSS can perfectly solve this requirement, I found an article that discusses how to use CSS to truncate text. The article introduces several methods, but I think the last method perfectly solves my requirement. Below is the method mentioned in the article:

Using Float Property to Implement Multiline Text Truncation#

Returning to the initial content I wanted to achieve, which is multiline title text truncation effect, it is obviously impossible to control the length of the title, so the above method cannot be used. Looking back at the essence of the matter: we hope that CSS can have a property that can display ellipsis when the text overflows, and not display ellipsis when it does not overflow. (Two forms, two effects)

Just when I thought CSS was powerless and could only be implemented through JS, I later saw a very clever method that can meet all the criteria mentioned above. Below, I will introduce how to use the float property to achieve multiline text truncation effect.

Basic principle:

There are three boxes: a pink box floating to the left, a light blue box and a yellow box floating to the right.

When the height of the light blue box is lower than the pink box, the yellow box will still be below the light blue box.
If the text in the light blue box is too long and exceeds the height of the pink box, the yellow box will not stay below, but will drop below the pink box.

Okay, the two states and two display forms have been distinguished. We can position the yellow box relatively and move the overflowing yellow box to the bottom right corner of the text content, while the non-overflowing yellow box will be moved to outer space, as long as we use overflow: hidden to hide it.

This is the basic principle. We can imagine the light blue area as the title and the yellow area as the ellipsis effect. You may think that the pink box occupies space, so won't the title be delayed as a whole? This can be solved by using a negative value for margin. Set the negative value of margin-left of the light blue box to be the same as the width of the pink box, and the title can be displayed normally.

So let's simplify the previous DOM structure to the following:

<div class="wrap">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
</div>

The pink box and the yellow box from before can be replaced with pseudo-elements.

.wrap {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.wrap .text {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break: break-all;
}
.wrap::before {
  float: left;
  width: 5px;
  content: '';
  height: 40px;
}
.wrap::after {
  float: right;
  content: "...";
  height: 20px;
  line-height: 20px;
  /* Width of three ellipsis */
  width: 3em;
  /* Make the box not take up space */
  margin-left: -3em;
  /* Move the position of the ellipsis */
  position: relative;
  left: 100%;
  top: -20px;
  padding-right: 5px;
}

Implementation effect: demo link

This is the most ingenious method I have seen so far. It only requires support for CSS 2.1 features. Its advantages are:

Good compatibility, good support for major mainstream browsers
Responsive truncation, adjusting based on different widths
Only display ellipsis when the text exceeds the range, otherwise do not display ellipsis

As for the disadvantages, because we are simulating ellipsis, sometimes the display position cannot be perfect. Therefore, you can consider:

Adding a gradient effect to fit the text, just like the above demo effect
Adding word-break: break-all; to allow a word to be split when wrapping, resulting in a better fit between the text and ellipsis.

However, in actual use, I found that top: -20px in .wrap::after is offsetting upwards relative to wrap, which is inconsistent with the example in the article where it is offset downwards. In the end, I solved this problem by adding box-sizing: content-box; to wrap. It is estimated that the layouts in my own project have affected it, and I am not sure why it is like this for now.