Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure CSS to achieve multi-line text truncation, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Single-line text truncation text-overflow

Text overflow we often use should be text-overflow: ellipsis, I believe we are very familiar with, only a few lines of code can easily achieve a single line of text truncation.

Div {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

Implementation effect: demo address

Property browsers are natively supported, and the major browsers have good compatibility. The disadvantage is that they only support single-line text truncation, but do not support multi-line text truncation.

Applicable scenario: single-line text truncation is the easiest to achieve, the effect is the best, rest assured to use.

If it is the effect of multi-line text interception, it is not so easy to achieve.

-webkit-line-clamp implementation

Let's introduce the first way, which is achieved through the-webkit-line-clamp attribute. The specific methods are as follows:

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

It needs to be used with display,-webkit-box-orient, and overflow:

Display:-webkit-box; must combine properties to display the object as a flexible box model.

-webkit-box-orient; must combine attributes to set or retrieve the arrangement of the child elements of the telescopic box object

Text-overflow: ellipsis; optional attribute, which can be used in the case of multiple lines of text, with an ellipsis "…" Hide text that is out of range.

Implementation effect: demo address

In terms of effect, its advantages are as follows:

Responsive truncation, adjusted according to different width

The ellipsis is displayed only when the text is out of range, otherwise the ellipsis is not displayed.

The browser is natively implemented, so the ellipsis position is displayed just right

But the drawback is also straightforward, because-webkit-line-clamp is an irregular attribute that does not appear in the draft CSS specification. In other words, only browsers with webkit kernel support this attribute, such as Firefox, IE browsers do not support this attribute, browser compatibility is not good.

Usage scenario: it is mostly used for mobile pages, because mobile device browsers are mostly based on webkit kernel. Except for poor compatibility, truncation works well.

Positioning elements to achieve multi-line text truncation

Another reliable and simple way is to set the relative positioning height of the container, using an ellipsis (.) The element simulation is implemented as follows:

P {position: relative; line-height: 18px; height: 36px; overflow: hidden;} p::after {content: "..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px / * to show better * / background:-webkit-gradient (linear, left top, right top, from (rgba (255,255,255,0), to (white), color-stop (50%, white)); background:-moz-linear-gradient (to right, rgba (255,255,255,0), white 50%, white); background:-o-linear-gradient (to right, rgba (255,255,255,255,0), white 50%, white) Background:-ms-linear-gradient (to right, rgba (255,255,255,0), white 50%, white); background: linear-gradient (to right, rgba (255,255,255,0), white 50%, white);}

The principle of implementation is easy to understand, that is, the pseudo element is absolutely positioned to the end of the line and hides the text, and then hides the excess text through overflow: hidden.

Implementation effect: demo address

From the perspective of implementation effect, it has the following advantages:

Good compatibility and good support for major browsers

Responsive truncation, adjusted according to different width

However, it cannot recognize the length of the text, that is, the ellipsis is displayed when the text is out of range, otherwise the ellipsis is not displayed. And because we artificially add an ellipsis effect at the end of the text, it doesn't really fit very closely with the text. In this case, you can split a word when you wrap a line by adding word-break: break-all;.

Suitable for the scene: there is a lot of text content, so it is a good way to make sure that the text content will exceed that of the container.

Float feature to realize multi-line text truncation

Back to the beginning of the content I want to do is the multi-line title text interception effect, obviously can not control the length of the title, obviously can not use the above method. Going back to the nature of the matter: we want CSS to have an attribute that displays ellipses in the case of text overflows and does not show ellipses when there is no overflow. (two forms, two effects)

Just when I thought that CSS was powerless and could only be implemented through JS, I later saw a method that was very clever and could meet all the criteria mentioned above. Here I will show you how to achieve multi-line text truncation through the float feature.

Basic principles:

There are three boxes div, pink box floating on the left, light blue box and yellow box floating on the right.

When the height of the light blue box is lower than the pink box, the yellow box will still be at the lower right of the light blue box.

If the light blue box has too much text and is higher than the pink box, the yellow box will not stay at the lower right, but will fall under the pink box.

Well, the two display forms of the two states have been distinguished, so we can relative locate the yellow box, move the yellow box that overflows to the lower right corner of the text content, and the one that does not overflow will be moved to outer space, as long as we use overflow: hidden to hide it.

The basic principle is that we can think of the light blue area as the title and the yellow area as the ellipsis effect. Then you may think that the pink box takes up space, isn't it that the title will be postponed as a whole? here you can come out by the negative value of margin. The negative value of margin-left of the light blue box is 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 look like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.

Both the pink box and the yellow box 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 / * the width of three ellipses * / width: 3mm; / * keep the box out of position * / margin-left:-3mm; / * move the ellipsis position * / position: relative; left: 100%; top:-20px; padding-right: 5px;}

Implementation effect: demo address

Here's the most ingenious way I've seen so far. You only need to support the features of CSS 2.1.It has the following advantages:

Good compatibility and good support for major browsers

Responsive truncation, adjusted according to different width

The ellipsis is displayed only when the text is out of range, otherwise the ellipsis is not displayed.

As for the disadvantages, because we simulate the ellipsis, sometimes the display position is not just right, so we can consider:

Add a gradient effect to fit the text, just like the demo effect above

Adding word-break: break-all; allows a word to be split as it wraps, so that text and ellipses fit better.

The above is "how to use pure CSS to achieve multi-line text truncation" all the content of this article, thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.