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

Mysql implements regular clearing of old data in a table and retaining several pieces of data (recommended)

CSS3 property line-clamp controls the use of text lines

Mysql implements regular clearing of old data in a table and retaining several pieces of data (recommended)

How to implement gzip compression in nginx to improve website speed

Automated front-end deployment based on Docker, Nginx and Jenkins

In-depth understanding of the seven communication methods of Vue components

How to use regular expression query in MySql

How to query the latest transaction ID in MySQL

Solution to win10 without Hyper-V

DOCTYPE Document Type Declaration (Must-Read for Web Page Lovers)

React ref usage examples

my.cnf parameter configuration to optimize InnoDB engine performance

Recommend

VScode Remote SSH remote editing and debugging code

Uniapp WeChat applet: Solution to key failure

Example of how to automatically start an application service in a Docker container

Detailed Tutorial on Using xargs Command on Linux

Summary of the use of three for loop statements in JavaScript (for, for...in, for...of)

Detailed explanation of how to migrate a MySQL database to another machine

Implementation of Docker cross-host network (manual)

How to install and configure the Docker Compose orchestration tool in Docker.v19

Complete steps to install mysql5.7 on Mac (with pictures and text)

vmware virtual machine ubuntu18.04 installation tutorial

How to deploy SpringBoot project using Dockerfile

Detailed explanation of MySQL backup and recovery practice of mysqlbackup

A brief discussion of 3 new features worth noting in TypeScript 3.7

Perfect solution to Google Chrome autofill problem

Docker installation method and detailed explanation of Docker's four network modes