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:
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
How to detect whether a file is damaged using Apache Tika
Apache Tika is a library for file type detection ...
MySQL GROUP_CONCAT limitation solution
effect: The GROUP_CONCAT function can concatenate...
The process of setting up an environment for integration testing using remote Docker
Demand background The team has the need for integ...
Use Javascript to implement the function of sending SMS verification code interval
In many apps and websites, when we log in or regi...
Quickly solve the Chinese input method problem under Linux
Background: I'm working on asset reporting re...
Div adaptive height automatically fills the remaining height
Scenario 1: Html: <div class="outer"...
Collection of 25 fonts used in famous website logos
This article collects the fonts used in the logos...
A simple explanation of MySQL parallel replication
1. Background of Parallel Replication First of al...
Vue implements simple calculator function
This article example shares the specific code of ...
Docker deployment nginx implementation process graphic and text detailed explanation
1. Download nginx [root@localhost my.Shells]# doc...
How to dynamically add ports to Docker without rebuilding the image
Sometimes you may need to modify or add exposed p...
Vue+ElementUI implements paging function-mysql data
Table of contents 1. Problem 2. Solution 2.1 Pagi...
Detailed explanation of the simple use of MySQL query cache
Table of contents 1. Implementation process of qu...
Detailed explanation of flex and position compatibility mining notes
Today I had some free time to write a website for...
Initial summary of the beginner's website building tutorial
After writing these six articles, I started to fee...