Example code for implementing multiple line omissions using three methods of advanced CSS

Preface

This is an old demand, but there are still many people looking for solutions online, especially those ranked high in the search results, which only introduce solutions using -webkit-line-clamp with poor compatibility.

If you see this article, it may mean that you have jumped here from so many cookie-cutter articles and are looking for a better solution. Then congratulations, there is no better, only more suitable. Of course, the premise is that my article has enough traffic and can be pushed up so that you have the opportunity to see it.

Here are three methods for truncating multi-line text. Of course, the first one is -webkit-line-clamp solution that you may want to vomit. If you don’t want to read it, just jump to the second method and start reading.

Using -webkit-line-clamp

Apply the following styles to the multi-line text container

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

Except for -webkit-line-clamp , other properties remain unchanged. The main purpose is to display the object as an elastic box model and set the arrangement of the child elements of the elastic box object.

And -webkit-line-clamp is used to control how many lines are omitted

advantage:

The browser natively supports the omission behavior, and the style looks comfortable
Easy to use

shortcoming:

As you can see from the prefix of the attribute, this is supported by browsers with webkit kernel, but the compatibility is not wide.

Usage scenarios

If you only target webkit-based browsers or mobile devices (most mobile browsers are based on the webkit-based browser kernel), then this solution is the best.

Using absolute positioning

This solution is actually very easy to understand. First, we reserve a space on the right side of a container that holds content for an ellipsis, and use padding-right: 1em; to reserve space. Why 1em? An ellipsis is almost 1em. The em unit is used to respond to font size.

Use absolute positioning to position the ellipsis in the lower right corner of the reserved space.

html

<div class="wrap">Content</div>

CSS

.wrap3 {
    position: relative;
    padding-right: 1em;
    /*max-height is a multiple of line-height, depending on how many lines you want to display*/
    max-height: 3.6em;
    line-height: 1.2em;
    text-align: justify;
    overflow: hidden;
}

.wrap3:before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

Effect (multiple contents):

In this way, the ellipsis will always exist. So to solve this problem, we use a square with the same color as the background to cover the ellipsis. The key point is, how do we know when to cover it and when not to cover it?

Idea: The square used to block the ellipsis is also absolutely positioned, set to the right, right: 0 , but bottom value should not be set. If not set, the square will move with the actual height of the text content, not the height of max-height . In this case, when there is no need to omit (that is, it does not exceed max-height ), it happens to be the case of bottom: 0 , which will block the ellipsis. When the ellipsis is to be omitted (i.e. exceeds max-height ), the ellipsis will not be blocked, and it itself will be hidden by overflow: hidden .

So the final solution is:

html

<div class="wrap">Content</div>

CSS

.wrap {
    position: relative;
    /*line-height and height should be coordinated with each other. The number of lines to be omitted is the multiple of line-height*/
    line-height: 1.2em;
    max-height: 3.6em;
    /*This property is determined by demand. Because padding-right is set, more space is freed up. This value is generally the negative value of padding-right*/
    /*margin-left: -1em;*/
    /*This value should be hard-coded as 1em, because the ellipsis probably takes up 1em of space*/
    padding-right: 1em;
    text-align: justify;
    overflow: hidden;
}

.wrap:before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

.wrap:after {
    position: absolute;
    right: 0;
    /*Just set the width and height to 1em, because the ellipsis takes up about 1em of space, which is used to cover the ellipsis, and is basically the same as the padding-right of wrap*/
    width: 1em;
    /*Keep consistent with the actual value of wrap line height*/
    height: 1.2em;
    content: '';
    /*It should be consistent with the background color so that the ellipsis can be covered without any abnormality*/
    background-color: #fff;
}

Effect:

advantage

Good compatibility, supported by all major browsers
Adaptive height, no need to hard-code the height, set the number of lines to be omitted before displaying
Adaptive Width
Adaptive font size, the font size will not affect the original requirements, that is, the number of lines required to be omitted will be omitted

shortcoming

Some space will be left on the right side of the text for the ellipsis to be placed
You need to consider the background color, because the after pseudo-class uses the background color to cover the ellipsis.

Using float layout

This solution may not be easy to understand for those who do not have a solid foundation of basic knowledge. If you just want to find a solution and don’t want to know the principle, you can go directly to

Before talking about this solution, we must first understand such a phenomenon:

There is such a section of html

<div class="wrap">
    <div class="left">Left float</div>
    <div class="right1">Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1Float right 1</div>
    <div class="right2">Float right 2</div>
</div>

Apply this style

.wrap {
	height: 100px;
}
.left {
	float: left;
	width: 60px;
	height: 100%;
	background: pink;
}
.right1 {
	float: right;
	/*Occupy the remaining width of wrap except left*/
	width: calc(100% - 60px);
	background: #95d9f8;
}
.right2 {
	float: right;
	background: yellow;
}

Under normal circumstances, it will be displayed like this, which is also what everyone can generally imagine:

The conditions for this normal phenomenon to occur are:

The height of .right1 does not exceed the height of .left (i.e. less content)
The width of .right2 is less than the width of .right1

Okay, I think everyone understands this situation. Then, if we increase the content of .right1 to exceed the height of the left float, the following scene will happen

Right Float 2 is stuck in the lower left corner.

Want to ask me why this happened? Um...it seems that your basic knowledge of float is not solid. I suggest you consolidate your basic knowledge. Actually, I can’t explain it. I only know that this is a normal performance of float.

The conditions for this phenomenon to occur are:

The height of .right1 exceeds the height of .left (i.e. more content)
The width of .right2 is less than or equal to the width of .left

Transforming knowledge into demand realization

After understanding the above two scenarios, how should we use this knowledge to match the corresponding needs?

Assume that the text content of right float 1 is the content we want to omit for multiple lines, and the content of right float 2 is the ellipsis (...). In this way, when there is little content, the ellipsis is the first case mentioned above, and when there is a lot of content, it is the second case.

Is this dynamic change similar to the change in demand of "do not omit when the text is small, omit when the text is large"? On this basis, what we need to solve is that in the first case, right float 2 is hidden, and in the second case, right float 2 appears in the lower right corner of .wrap , and the content that exceeds the height is hidden.

To solve the above problem, just use position: relative; for relative positioning. .wrap applies overflow: hidden; to the parent container. In the first case, it is positioned outside the parent container and is hidden. In the second case, it is positioned at the lower right corner of the parent container.

Okay, now the focus of the solution is on how to accurately locate the problem (next section). Before dealing with the positioning problem, first convert the current situation into actual demand code:

<!--Use pseudo-elements to replace the actual tags for left and right float 2 -->
<div class="wrap">
    <div class="text">Float right 1</div>
</div>

.wrap {
    height: 100px;
    /*line-height is used to control the maximum number of lines of text that can be displayed*/
    line-height: 20px;
    overflow: hidden;
}
.wrap:before {
    float: left;
    /* Must be greater than or equal to the width of the after element*/
    width: 1.5em;
    height: 100%;
    content: '';
}
.text {
    float: right;
    /*Use negative marginLeft to avoid the blank space created by before*/
    /*Because in actual demand, it is impossible for the left side of your parent container to be blank*/
    margin-left: -1.5em;
    /*Since a negative marginLeft value is used, the text container width can occupy 100% of the parent container width*/
    width: 100%;
}
.wrap:after {
    float: right;
    /*Generally, three dots are about 1em wide. Using em as the unit can make the font size adaptive*/
    width: 1em;
    content: '...';
}

If you are curious at this time, why .text is set to width: 100%; but : :after is still stuck under :before when there is a lot of content? This is because even if .text sets margin-left: -1.5em; it does not actually affect the original document flow. It will remain the same as it should be. Setting a negative margin only affects the presentation style of .text itself.

How to locate

Solving the positioning problem is based on the code in the previous section. The problems currently exposed are:

When there is little content and no need to omit it, the ellipsis is displayed
When there is too much content to be omitted, the ellipsis hides the

Let’s solve the second problem first.

Idea: Move this :after to the right of .wrap and move it up to the last line.

If you use position: relative; to control it, top value is easy to get. Just take the same actual value of line-height of .wrap and use a negative value. The key is the left value, how to choose it so that it appears exactly in the lower right corner.

If you know the width of .text (such as 100px), you can just set left: 100px; but this will only work for fixed width situations and will not adapt to the width. To achieve adaptivity, the value of left can be taken as a percentage, so what percentage is it? This is tangled. Just take 100%, and you will find that it will be moved out of the parent container.

If it is to appear in the lower right corner, the initial position of the ellipsis must be on the left side of .wrap , right next to .wrap , so that it can appear in the lower right corner after left: 100% .

Now the question becomes how to make :after appear just to the left of .wrap . The following code may be difficult to understand for those who do not have a solid foundation (the new part is in the comments):

.wrap:after {
    float: right;
    /*Because margin is set below, there is no requirement for the width value here*/
    width: 1em;
    content: '...';
    
    /*These two properties are set next to the left side of .wrap*/
    /*This value should be the same as its own width, take a negative value*/
    margin-left: -1em;
    /*This value should be the same as the before width*/
    padding-right: 1.5em;
    
    /*This is where the ellipsis is positioned*/
    position: relative;
    left: 100%;
    /*Same as the actual line height of the parent element wrap, negative value*/
    top: -20px;
}

Regarding setting margin and padding values, it would be best if you can understand it. If not, I will try to explain it as much as possible, but it is really hard to explain.

First, when applying margin-left: 1em; since the width of :after is smaller than that of :before , according to the original float layout,

Pink floats to the left, blue and red float to the right. If the width of the red color continues to increase to the remaining space except for the pink color, the blue color will be squeezed to the line break and float to the right because there is not enough space in one line. But if you set the blue margin-left to a negative value of its own width, then there is still room for it in one row, and it becomes as follows

According to the above principle, after setting margin-left: 1em; :after will return to the first line of the parent container, next to the left side of the parent container. But we can’t put it back on the first line, so we set padding-right: 1.5em; to make the space it actually occupies so large that it can’t fit on the first line, and it will return to its original position under :before , but the padding value will move it to the left.

Okay, I have finished my explanation. Whether you can understand it or not depends on your luck, haha.

It is worth noting that the comment about width in the above code says "Because margin is set below, there is no requirement for the width value here". Previously, it was required to be less than or equal to the :before width, but now because the negative value of margin-left offsets the original width, this requirement is converted to padding-right , which is now equal to

summary

So far, all problems have been solved. For all the issues discussed above, the following code is summarized (specific optimizations are explained in comments):

CSS Styles

.wrap {
    /*Need to set the height*/
    height: 100px;
    /*Used to set the number of lines to be displayed before omitting. The value is generally obtained by dividing the height value of wrap by the number of lines, but the number of lines will be limited by the font size*/
    /*The font is too large, and it will look ugly if you set it to display many lines, as they are all squeezed together. So the actual value depends on specific needs and practices*/
    line-height: 25px;
    /*Adding this attribute will improve the display effect, and it will not have much impact even if some browsers do not support it*/
    text-align: justify;
    overflow: hidden;
}

.wrap:before {
    float: left;
    /*This value can be set arbitrarily, regardless of the unit or anything else*/
    width: 1em;
    height: 100%;
    content: '';
}

.wrap:after {
    float: right;
    /*The size is arbitrary, it is best to set it in em units, which can adapt to the font size*/
    /*If you want to use the following gradient effect, then this value should be greater than the width value in before for better effect*/
	/*The larger the value, the more obvious the gradient effect and the larger the affected range. */
    width: 2.5em;
    /*The actual px value of the line height is the same as the parent element wrap*/
    height: 25px;
    /*This value should be the same as its own width, take a negative value*/
    margin-left: -2.5em;
    /*This value should be the same as the before width*/
    padding-right: 1em;
    content: '...';
    text-align: right;
    /*Here we start to use the float layout to position and move*/
    position: relative;
    /*Same as the actual line height of the parent element wrap, negative value*/
    top: -25px;
    left: 100%;
    /*The gradient effect is set to make the ellipsis and content connect more naturally and not so abrupt. Pay attention to matching the color of the background where the text is located (replace white with the background color)*/
    background: #fff;
    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);
}

.wrap .text {
    float: right;
    /*This value must be equal to the width value of wrap:before*/
    margin-left: -1em;
    width: 100%;
}

html file:

<div class="wrap">
    <span class="text">
        Example 2: Distribute the solution to the problem of mobile phone development and exchange
</div>

Effect:

advantage

Good compatibility, can be supported by browsers that are not webkit-based
Adaptive Width

shortcoming

Fixed height, cannot adapt to the height, so the number of lines displayed is also limited by the font size
You need to wrap the text in a tag to set the style
From the perspective of reading the style code, it is not easy to understand
If the element where the ellipsis is located does not use a gradient background, it may appear abruptly cut off. If a gradient background is used, pay attention to the color matching with the background where the text is located.

Summarize

In fact, there is no saying which plan is better, only whether it is suitable for you. If you are asked to peel fruit, just take a fruit knife, there is no need to use a big knife. So, there are always three options that meet your needs.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: IE6 web page creation reference IE6 default style

>>: Docker volume deletion operation