CSS3 property line-clamp controls the use of text lines

CSS3 property line-clamp controls the use of text lines

Description: Limit the number of lines of text displayed in a block element.

-webkit-line-clamp is an unsupported WebKit property that does not appear in the CSS draft specification.

To achieve this effect, it needs to combine other exotic WebKit properties. Common combination properties:

  • display: -webkit-box; is a required attribute that displays the object as an elastic box model.
  • -webkit-box-orient must be combined with the property to set or retrieve the arrangement of the child elements of the flex box object.
  • text-overflow can be used to hide the text that exceeds the range with ellipsis "..." in the case of multiple lines of text.

Today we received an optimization request, requiring the content in the post list to be shortened to 3 lines with '…' ellipsis

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>cline-clamp</title>
    <style>    
            .box{
                width: 200px;
                height: 300px;
                border:1px solid black;
            }
            p{
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                  -webkit-line-clamp: 4; /*Set the maximum number of lines for the p element to be 4. The parent element needs to fill in the width to be obvious*/
                  text-overflow: ellipsis;
                  overflow: hidden;
                 /* autoprefixer: off */
                 -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  /*Because of the code environment, webkit-box-orient is filtered out. This keyword autoprefixer can be exempted from being filtered.*/
          word-wrap:break-word;
          word-break:break-all;
} </style> 
</head> 
<body> 
<div class="box"> 
    <p> static: The object follows the normal flow. The top, right, bottom, left, etc. properties will not be applied. relative: The object follows the normal flow, and when it is offset by the top, right, bottom, left properties relative to its position in the normal flow, it does not affect any elements in the normal flow. absolute: The object is out of the normal flow and is absolutely positioned using properties such as top, right, bottom, and left.
    </p> 
</div> 
</body> 
</html>

The effect is as follows:

If the text in your tag is in English, it will not wrap automatically, so you need to add the following code to make it wrap automatically:

word-wrap:break-word;
word-break:break-all;

Of course, you can also use the plug-in clamp.js

This concludes this article on how to use the CSS3 property line-clamp to control the number of text lines. For more information about how to use the CSS3 line-clamp to control the number of lines, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!

<<:  Question about custom attributes of html tags

>>:  Detailed explanation of Vue plugin

Recommend

Notes on MySQL case sensitivity

Table of contents MySQL case sensitivity is contr...

MySQL Community Server 8.0.12 installation and configuration method graphic tutorial

MySQL 8 brings a brand new experience, such as su...

Difference between varchar and char types in MySQL

Table of contents aforementioned VARCHAR Type VAR...

Better-scroll realizes the effect of linking menu and content

1. Basic use <!DOCTYPE html> <html lang=...

Practical operation of using any font in a web page with demonstration

I have done some research on "embedding non-...

arcgis.js controls the display range of the map body to automatically bounce back when it exceeds the area (implementation ideas)

Table of contents background Effect Ideas backgro...

Some suggestions on Vue code readability

Table of contents 1. Make good use of components ...

Detailed explanation of the application of Docker Swarm in continuous integration testing

background The Agile model is widely used, and te...

Antd+vue realizes the idea of ​​dynamic verification of circular attribute form

I hope to implement some properties of the query ...

Solve the problem of docker pull image error

describe: Install VM under Windows 10, run Docker...

Detailed Analysis of or, in, union and Index Optimization in MySQL

This article originated from the homework assignm...

MySQL select, insert, update batch operation statement code examples

In projects, batch operation statements are often...

Practical record of optimizing MySQL tables with tens of millions of data

Preface Let me explain here first. Many people on...

4 ways to modify MySQL root password (summary)

Method 1: Use the SET PASSWORD command First log ...

Detailed analysis of MySQL optimization of like and = performance

introduction Most people who have used databases ...