Pure CSS custom multi-line ellipsis problem (from principle to implementation)

How to display text overflow? What are your needs? Single line or multiple lines? Truncation, ellipsis, custom style, adaptive height? You can find the answers here. Next, I will go from the shallower to the deeper, from principle to implementation, and take you step by step to unveil the veil of multi-line ellipsis. Let's start with the simplest single-line overflow ellipsis.

Warm up, single line omitted

This is a unified solution for the entire universe, without too much magic

/* Principle: Set the text not to wrap, hide it after overflow, and truncate it to display the ellipsis*/
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

How to achieve multiple line ellipsis? Let’s start with the simplest line-clamp .

The simplest multi-line ellipsis, line-clamp

The CSS property -webkit-line-clamp can limit the content in a block container to a specified number of lines.

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

The -webkit prefix on the property tells us that things don't seem to be simple. Yes, it only supports browsers based on webkit kernel, which is very friendly to mobile devices. On Android 2.3+ and IOS 5.0+ devices, you can directly throw the above code in without any problems, but if you want to use it on the PC, you need to pay attention to compatibility issues.

In addition to PC compatibility issues, the line-clamp solution does not support custom ellipsis styles. If you need to add custom styles such as text, arrows, etc. after the ellipsis, we may have to consider other solutions, such as: floating.

The magic of float

What! Can floating also achieve multi-line ellipsis? Yes, below we use three float boxes to simulate multi-line ellipsis. First, prepare three boxes (text box, placeholder box, custom style ellipsis box) to float to the right. To make it easier to understand the principle, we add different background colors to the boxes.

<div class="box">
  <!-- Text box -->
  <div class="box__text">Tencent enriches the lives of Internet users with technology. Through the communication and social software WeChat and QQ, we promote user connections and help them connect to digital content and life services at their fingertips. </div>
  <!-- Placeholder box -->
  <div class="box__placeholder"></div>
  <!-- Custom ellipsis box -->
  <div class="box__more">... expand</div>
</div>

<style>
  .box__text {
    width: 100%;
    height: 60px;
    line-height: 20px;
    background-color: pink;
    float: right;
  }

  .box__placeholder {
    width: 60px;
    height: 60px;
    background-color: gray;
    opacity: 0.8;
    float: right;
  }

  .box__more {
    width: 60px;
    text-align: right;
    background: yellow;
    float: right;
  }
</style>

Next, we start adjusting the position by giving the text box a negative left margin, whose value is exactly the width of the placeholder box.

.box__text {
  margin-left: -60px;
}

This will give the placeholder box space, and it will float to the left, in line with the text box.

In the above picture, the height of the text box is smaller than the height of the placeholder box. At this time, the height of the first row is the height of the placeholder box. There is no extra space in the first row, and our custom ellipsis box can only be placed in the second row. Imagine what happens when the height of the text box is greater than the height of the placeholder box (for example, the text displays 4 lines)?

The height of the first row will be expanded by the text box. At this time, there is extra space in the first row and the ellipsis box can squeeze in.

Awesome 😊. Next, just position the ellipsis box to the right, in the same row as the placeholder box.

.box__more {
  position: relative;
  left: 100%;
  transform: translate(-100%, -100%);
}

Modify it, remove the background color, set the container to overflow hidden, and then add a text color and gradient to the ellipsis box.

.box {
  position: relative;
  overflow: hidden;
}

.box__more {
  color: #1890ff;
  background-image: linear-gradient(to left, white 40%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
}

To sum up, the principles of floating and BFC are actually used here.

The outer box creates a BFC through overflow: hidden . The area of ​​the floating box will not overlap with the BFC. When calculating the height of the BFC, the floating elements will also be included in the calculation. The floating box will float to the beginning or end of the current line. With the help of some positioning techniques, the effect of multiple line ellipsis can be simulated.

The advantages of the floating solution are very obvious.

• Strong compatibility, supports all mainstream PC and mobile browsers
• Support custom text ellipsis style with gradient

Since the omitted style area is essentially a floating box, we need to use gradient to prevent it from being exposed. This solution begins to fail for areas with complex background colors or stronger custom omitted style requirements (for example, the omitted style is defined as an arrow or a picture).

Is there any other way to achieve complete customization of the omitted style?

Yes, a space is reserved for custom ellipsis boxes.

So how do you reserve it? We can use line-clamp . The ellipsis truncated by line-clamp can help us take up space ... If we can hide the default ellipsis in some way and replace it with our custom floating box, that would be enough! This is the solution we will introduce next.

Fully customizable, float + line-clamp

Let's reorganize the above ideas. There are three key points:

With the help of line-clamp 's default ellipsis, we reserve a place for our custom ellipsis box. We try to hide the default ellipsis and replace the reserved place with our custom ellipsis box through positioning technology.

Let's look at them one by one. First, the reserved space. The default size of the ellipsis line-clamp is affected by the font font-size , so adjusting the font size can control the size of the reserved space. To ensure that the size of the ellipsis is only affected by the font size, we can reset the line height and text spacing.

.box__text {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 60px;
  line-height: 0;
  letter-spacing: 0; /* Resets the line height and text spacing to ensure that the ellipsis is only affected by the font size*/
  color: red; /* For the convenience of demonstration, let's give the ellipsis a color first*/
}

In this way, you can control the size of the reserved ellipsis box by only adjusting the font size of the text box. Since font-size will be inherited, we embed a subbox to reset the font size.

<div class="box__text">
    <div class="box__inner">
      Tencent enriches the lives of Internet users with technology. Through the communication and social software WeChat and QQ, we promote user connections and help them connect to digital content and life services at their fingertips.
    </div>
</div>

<style>
  .box__inner {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    vertical-align: top;
    display: inline;
  }
</style>

The next step is to find a way to hide the ellipsis. This is relatively simple. You can set the transparency or color transparency.

.box__text {
  opacity: 0;
  color: transparent;
}

Now that we have the reserved space for the ellipsis, we need to find a way to position the custom ellipsis box to the reserved space. What should we do? Still floating. Since -webkit-line-clamp is set, the text box cannot expand to its full height. In order to use floating to achieve positioning, we can render an extra copy to expand the height.

Prepare an absolutely positioned box as a container for rendering the expanded height copy.

<div class="box__abs">
    <div class="box__fake-text">
      Tencent enriches the lives of Internet users with technology. Through the communication and social software WeChat and QQ, we promote user connections and help them connect to digital content and life services at their fingertips.
    </div>
    <div class="box__placeholder"></div>
    <div class="box__more">... expand</div>
</div>

<style>
  .box__abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
</style>

Next, we use the three floating boxes we mentioned earlier to implement multi-line overflow ellipsis.

.box__fake-text {
  width: 100%;
  margin-left: -60px;
  line-height: 20px;
  float: right;
  color: transparent; /* The text is to expand the height, and cooperate with floating to achieve multi-line overflow omission*/
}

.box__placeholder {
  width: 60px;
  height: 60px;
  float: right;
}

.box__more {
  position: relative;
  left: 100%;
  transform: translate(-100%, -100%);
  width: 60px;
  text-align: right;
  color: #1890ff;
  float: right;
}

It should be noted that the text box here is to expand the height and does not need to be displayed, so we set the color to be transparent. Okay, the last step is to remove the background color and set the overflow of the outer box to hide, which is our final effect.

line-clamp + floating method can achieve complete customization of the ellipsis. We reset the line height and text spacing. You only need to adjust font-size of the outer box to control the width of the custom ellipsis box. You can replace the ellipsis box with any arrow, picture, corner or text. Now you don't have to worry about the UI girl's requirements):

This concludes this article on pure CSS custom multi-line ellipsis (from principle to implementation). For more relevant CSS custom multi-line ellipsis content, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!