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

CSS3 property line-clamp controls the use of text lines

mysql row column conversion sample code

How webpack implements static resource caching

WeChat applet records user movement trajectory

Detailed description of mysql replace into usage

HTML5 and jQuery to implement preview code examples before uploading local pictures

In-depth analysis of the Tomcat server of Centos 7 system

CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing

What are the similarities between the development of web design and western architecture?

The most complete tutorial on installing centos8.1 with VMware15.5 and the problem of insufficient physical memory

CSS3 Bezier Curve Example: Creating Link Hover Animation Effects

Recommend

How to open ports to the outside world in Alibaba Cloud Centos7.X

MySQL database migration quickly exports and imports large amounts of data

Detailed steps to implement the Excel import function in Vue

A solution to the abnormal exit of Tomcat caused by semaphore

Summary of the advantages of Vue3 vs. Vue2

Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5

js native carousel plug-in production

Detailed explanation of JavaScript data types

Teach you how to build the vue3.0 project architecture step by step

MySQL 5.7.17 latest installation tutorial with pictures and text

IIS 7.5 uses URL Rewrite module to achieve web page redirection

Implementation of Single Div drawing techniques in CSS

How to submit the value of a disabled form field in a form Example code

How to write memory-efficient applications with Node.js

Solve the problem of docker container exiting immediately after starting