I came across an interesting layout on a hot list page where the title limits the number of lines of content, so the text beyond is “line free”. The detailed rules are as follows:

  1. The entire container height is fixed, and the header and content are three lines in total
  2. Headings are at most 2 lines, exceeding ellipsis
  3. The content is determined by the remaining space. If the heading takes up 2 lines, the content is omitted after 1 line. If the heading takes up 1 line, content beyond 2 lines is omitted

Is it very clever (from) live (spectrum) interaction? Make full use of the page space to ensure that the title and content are displayed, as shown below

Look at the implementation of the original station, is to judge the height of the title through JS, and then dynamically add a class name to achieve. However, after some consideration, this can also be pure CSS implementation, let’s take a look

First, the title is beyond ellipsis

Let’s say I have a piece of HTML like this

<div class="section">
    <h3 class="title">LGD played Mammoth in TI10, RNG played Gallio in S7 and both lost, which made you more angry and disappointed?</h3>
    <p class="excerpt">Mammoth is the opposite team's absolute best, everyone knows that, and the previous two wins have proved that when LGD chooses to ban mammoth, or steal mammoth themselves, the opposite team is no match.</p>
</div>
Copy the code

The header rule is to omit more than 2 lines, which is simple and directly implemented with -webkit-line-clamp

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

More than 2 lines will be automatically omitted

Second, the content ADAPTS to the line number

Since the whole height is fixed, what if the content ADAPTS to the rest of the space? When it comes to adaptive remaining space, flex layout immediately comes to mind, so it can be implemented like this:

.section{
    display: flex;
    overflow: hidden;
    height: 72px;/* Specify a height */
    flex-direction: column;
}
.excerpt{
  	flex: 1; /* Adaptive remaining space */
  	overflow: hidden;
}
Copy the code

Do this with Flex: 1; overflow: hidden; I almost achieved the desired effect, as follows

It’s perfect, but now it’s over and there’s no ellipsis, so let’s go ahead

Three, indefinite line beyond ellipsis

In general, -webkit-line-clamp applies to the case where the number of lines is fixed. Now the number of lines is variable, sometimes it is 1 line, sometimes it is 2 lines. This is where we need a bit of sleight of hand. You may remember this article CSS implementation of multi-line text “expand and fold” – dig gold (juejin. Cn), which mentioned how to use float to achieve text beyond ellipsis effect, interested can refer to it.

1. Surround effect in the lower right corner

First add a pseudo-element and set the right float

.excerpt::before{
    content: '... ';
    float: right;
}
Copy the code

It is obvious that the ellipsis is currently in the upper right corner and now needs to be moved to the lower right corner. The previous operation used a floating element to squeeze the ellipsis down, but additional placeholders are required

Here is a new way, with CSS Shapes layout implementation!

First, fill the ellipsis height and align it to the bottom, which you can do with Flex

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

In this way, the ellipsis reaches the lower right corner, but the upper part is also squeezed out, so as not to achieve the effect of encircle. At this point, you can use THE SHAPES layout, do not understand this layout, can refer to this article by Zhang Xinxu: CSS Shapes layout tutorial for your own eyes.

Shape-outside :inset() indicates the distance indented up, right, down and left with its own boundary. Let’s say I have to indent it closer to the ellipsis, so

.excerpt::before{
    /* Other styles **/
  	shape-outside: inset(calc(100% - 1.5 em) 0 0);
}
Copy the code

Results the following

Remove the background and see the ellipsis neatly wrapped around the lower right corner

2. Automatically hide ellipses

Now, there is a problem. I need to hide the ellipsis when the text is small. How do I do that? Try “CSS Smoke screen”

In simple terms, it is to cover the ellipsis with a large enough color block. After setting the absolute position, the color block will follow the content text, so when there is too much text, the color block will also follow the text to squeeze down, as follows

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

The schematic principle is as follows

A few extreme cases may not be covered, for example

It doesn’t matter. You can fill it with anything, like a box-shadow, just offset it a little bit to the lower left corner

.excerpt::after{
    content: ' ';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
    box-shadow: -2em 2em #fff; /* Shadow on the lower left */
} 
Copy the code

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

Auto-clamp (codepen.io) is accessible to complete code.

Iv. Summary and explanation

This implements a text truncation effect of an indefinite number of lines, with a number of CSS tricks, and without many unfamiliar attributes other than shapes (which can be implemented in other ways as well). Here’s a quick summary:

  1. Multiple lines omit direct use – Webkit-line-clamp, supported by modern browsers
  2. The Flex layout makes it easy to handle the remaining space
  3. Float + Shapes layouts can also achieve a lower-right surround effect
  4. Box-shadow is very common in smoke and mirrors
  5. The appropriate accumulation of CSS wizardry, sometimes will help a lot

In my opinion, layout matters are of course best handled by CSS, the implementation is more flexible, rendering is faster, there are no frame constraints, no WAITING for DOM to load, no JS to calculate dimensions, no node traversal, there are so many benefits. If you think it’s good and helpful, please like, bookmark and retweet ❤❤❤