The original address

preface

Recently, when I was designing a responsive system, I encountered the effect of multi-line text interception for the title, as shown below:


Seemingly very simple title truncation effect, but there is no unified CSS property implementation standard, need to use some fantastic tricks to achieve, in general, when doing such text truncation effect we are more hope:

  1. Good compatibility, good support for major mainstream browsers
  2. Responsive truncation adjusts according to different widths
  3. Ellipsis is displayed only when the text is out of range. Otherwise, ellipsis is not displayed
  4. The ellipsis position is just right

Based on the above criteria, I will introduce various techniques to achieve the truncation effect and obtain the optimal solution according to the above criteria. (I uploaded the code to jsfiddle platform, click demo address to view)

Single-line text truncates text-overflow

Text overflow: Ellipsis (ellipsis) : text overflow: Ellipsis (ellipsis)

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Copy the code

Implementation effect: Demo address





Property browser native support, the compatibility of major browsers is good, the disadvantage is only to support a single line of text truncation, does not support multiple lines of text interception.

Applicable scenarios: single line text truncation is the most simple implementation, the best effect, rest assured to use.

If it’s a multi-line text intercept, it’s not that easy to implement.

– its – line – clamp

First, introduce the first method, which is implemented through the -webkit-line-clamp attribute. Specific methods are as follows:

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

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

  • display: -webkit-box; Properties that must be combined to display the object as an elastic stretchable box model.
  • -webkit-box-orient; Properties that must be combined to set or retrieve the arrangement of child elements of a flex box object
  • text-overflow: ellipsis; Optional property that can be used for multi-line text cases using the ellipsis “…” Hide out-of-range text.

Implementation effect: Demo address


In terms of effect, it has the following advantages:

  1. Responsive truncation adjusts according to different widths
  2. Ellipsis is displayed only when the text is out of range. Otherwise, ellipsis is not displayed
  3. Browser native implementation, so the ellipsis position appears just right

But the drawback is also straightforward, because -webkit-line-clamp is a non-spec property that does not appear in the CSS spec draft. This means that only webKit kernel browsers support this property, like Firefox, Internet Explorer do not support this property, browser compatibility is not good.

Usage scenario: Mostly used for mobile terminal pages, because mobile device browsers are based on webKit kernel, in addition to poor compatibility, achieve good truncation effect.

The positioning element implements multi-line text truncation

Another foolproof way to set the relative container height is to include the ellipsis (…). Element simulation implementation, the implementation method is 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; /* 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, 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); }Copy the code

The principle is well understood, with the pseudo-element absolutely positioned at the end of the line to hide the text, and with overflow: Hidden to hide the extra text.

Implementation effect: Demo address


From the point of view of the implementation effect, it has the advantages of:

  1. Good compatibility, good support for major mainstream browsers
  2. Responsive truncation adjusts according to different widths

But it does not recognize the length of the text, meaning that the ellipsis is displayed only when the text is out of range, otherwise it is not displayed. In addition, because we artificially add an ellipsis effect at the end of the text, it will not fit the text very closely. In this case, we can add word-break: break-all; Enables a word to be split on a line break.


Suitable for scenario: Text content is a lot of, sure text content will exceed the container, then choose this way.

The FLOAT feature implements multi-line text truncation

Going back to the beginning, WHAT I wanted to do was a multi-line header text capture effect, obviously you can’t control the length of the header, obviously you can’t use the above method. To get back to the basics of things: we want CSS to have a property that shows ellipses if the text overruns and not if it doesn’t. (Two forms, two effects)

Just when I thought CSS was out of the question and had to be implemented through JS, I saw a clever way to do it that met all the criteria mentioned above. Here’s how to implement multi-line text truncation using float.

Basic Principles:


There are three box divs, pink box floating left, light blue box and yellow box floating right,

  1. When the height of the light blue box is lower than that of the pink box, the yellow box will remain to the lower right of the light blue box.
  2. If the light blue box has too much text and is taller than the pink box, the yellow box will not stay at the bottom right, but will fall under the pink box.

Ok, now that we have separated the two presentation forms of the two states, we can position the yellow boxes relative to each other and move the overflow yellow boxes to the lower right corner of the text, while the ones that do not overflow will be moved to outer space. We can hide them by using overflow: hidden.


The basic idea is that we can think of light blue areas as headings and yellow areas as ellipsis effects. The negative value of the margin-left of the light blue box is set to be the same as the width of the pink box, and the title can also be displayed normally.

So let’s simplify the DOM structure to look like this:

<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>
Copy the code

Both the pink and yellow boxes can be replaced with false 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: 3em; Margin-left: -3em; margin-left: -3em; margin-left: -3em; /* move ellipses */ position: relative; left: 100%; top: -20px; padding-right: 5px; }Copy the code

Implementation effect: Demo address


Here I see the most ingenious way so far. You only need to support CSS 2.1 features, which have the following advantages:

  1. Good compatibility, good support for major mainstream browsers
  2. Responsive truncation adjusts according to different widths
  3. Ellipsis is displayed only when the text is out of range. Otherwise, ellipsis is not displayed

As for the disadvantages, because we are simulating ellipsis, the display position sometimes cannot be just right, so we can consider:

  1. Add a gradient effect that fits the text, just like the demo effect above
  2. Add the word – break: break – all; Make it possible to split a word on a line break so that it fits better with the ellipsis.

This method is probably the best I’ve seen with pure CSS, if you have a better method, welcome to leave a comment!