CSS implements text "indefinite number of lines" truncation

Stumbled in an almost hot list page has a very interesting layout, where the title will restrict the number of rows of content, so the text is beyond "uncertain line" of. The detailed rules are as follows:

1. The height of the entire container is fixed, with a total of 3 lines of title and content
2. The title is at most 2 lines, beyond which is omitted
3. The content is determined by the remaining space. If the title occupies 2 lines, the content exceeds 1 line and is omitted; if the title occupies 1 line, the content exceeds 2 lines and is omitted

Is it a very spiritual (free) and lively (spectrum) interaction? You can make full use of the page space to ensure that the title and content can be displayed, as shown below

Looking at the implementation of the original site, it is achieved by judging the height of the title through js, and then dynamically adding a class name. However, after some consideration, it can also be implemented in pure CSS. Let’s take a look.

One, the title exceeds the omission

Suppose there is such a piece of HTML

<div class="section">
    <h3 class="title">LGD 在 TI10 放猛犸，RNG 在 S7 放加里奥最后都输了，哪个更让你愤怒失望？</h3>
    <p class="excerpt">猛犸是对面的绝中绝，大家都知道，并且之前扳回两局已经证明了，当lgd选择ban掉猛犸，或者自己抢掉猛犸时，对面完全不是对手。</p>
</div>

The rule of the title is to omit more than 2 lines, this is simple, directly use -webkit-line-clamp

.title{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

More than 2 lines will be automatically omitted

2. Content adaptive line number

Since the entire height is fixed, can it be achieved if the content part is adapted to the remaining space? Speaking of adaptive remaining space , you can immediately think of flex layout, so it can be implemented like this:

.section{
    display: flex;
    overflow: hidden;
    height: 72px;/*定一个高度*/
    flex-direction: column;
}
.excerpt{
      flex: 1; /*自适应剩余空间*/
      overflow: hidden;
}

In this way, with the help of flex: 1;overflow: hidden; , the desired effect is almost achieved, as follows

It's perfect, but now there is no ellipsis beyond that, so let's look down

Three, indefinite line beyond omission

In general, -webkit-line-clamp suitable when the number of rows is determined. Now the number of rows is uncertain, sometimes it is 1 row and sometimes it is 2 rows. How to deal with it? Some tricks are needed here. You may remember this article CSS Implementing Multi-line Text "Expand and Collapse" , which mentioned how to use float to achieve the effect of text beyond omission. If you are interested, you can refer to it.

1. Surround effect in the lower right corner

First add a pseudo element, set the right float

.excerpt::before{
    content: '...';
    float: right;
}

Obviously, the ellipsis is currently at upper right corner of , and now it needs to be moved to lower right corner of . The previous operation was to squeeze the ellipsis down through a floating element, but additional placeholder elements are needed.

Here we introduce a new way, with the help of CSS shapes layout !

First of all, fill the height of the ellipsis and align it at the bottom, which can be achieved with flex

.excerpt::before{
    content: '...';
    float: right;
      height: 100%;
    display: flex;
    align-items: flex-end;
}

Although the ellipsis reached the lower right corner, the upper part was also squeezed away, and the surrounding effect was not achieved. At this time, you can use shapes for layout. If you don’t understand this layout, you can refer to this article by : 1617647f4470dd CSS shapes layout tutorial for yourself «Zhang Xinxu-Xin Space-鑫生活(zhangxinxu.com)

Here you only need to use shape-outside:inset() , which means the distance of inward indentation in the four directions of up, right, down, and left with itself as the boundary. For example, it needs to be indented to be close to the ellipsis position, so

.excerpt::before{
    /*其他样式**/
      shape-outside: inset(calc(100% - 1.5em) 0 0);
}

The effect is as follows

Remove the background, you can see the ellipsis perfectly surrounds the lower right corner

2. Automatically hide the ellipsis

Now there is still a problem, how to hide the ellipsis when there is less text? You can try "CSS blindfold"

Simply put, it is to cover the ellipsis with a large enough color block. After setting the absolute positioning, the color block follows the content text, so when there are more words, the color block is also squeezed down with the text. The implementation is as follows

.excerpt::after{
    content: '';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
} 

The principle is as follows

Individual extreme situations may not be able to cover, such as

It’s okay, you can just find something to fill it up, such as box-shadow , just shift it to the lower left corner a little bit.

.excerpt::after{
    content: '';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
      box-shadow: -2em 2em #fff; /*左下的阴影*/
} 

After setting the same color as the background color, the final effect is as follows

This achieves a certain interactive effect at the beginning of the article, the complete code can be accessed auto-clamp (codepen.io)

Four, summary and explanation

The above achieves a text truncation effect with an indefinite number of lines, and incorporates many CSS tips. Except for the shapes layout (of course, it can also be implemented in other ways), there are not too many unfamiliar attributes. Here is a brief summary:

1. Omit multiple lines and use -webkit-line-clamp directly, which is supported by modern browsers
2. The flex layout can easily handle the remaining space
3. The float + shapes layout can also achieve the bottom right corner surround effect
4. box-shadow is very common in blindfold
5. Appropriately accumulate some CSS tricks, sometimes it will help a lot

In my opinion, the layout issues are of course best solved by CSS, which is more flexible, faster to render, no frame restrictions, no need to wait for dom to load, no need to JS to calculate the size, no need to traverse nodes, there are too many benefits. If you think it's not bad, if it is helpful to you, please like, bookmark, and forward ❤❤❤