Use css3 to truncate text and add ellipses

PHPz
Release: 2017-04-02 10:28:41
Original
2005 people have browsed it

Code display:

overflow : hidden;
/*text-overflow: ellipsis; 有些示例里需要定义该属性,实际可省略*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
Copy after login

Overview

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

Limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other foreign WebKit properties. Commonly combined attributes:

display: -webkit-box; must be combined to display the object as an elastic scaling box model.

-webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.

Text-overflow can be used to hide out-of-range text with the ellipsis "..." in the case of multi-line text.

All codes:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css3截取字符串多行</title>
<style>
.box { 
width: 400px; 
display: -webkit-box; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical; overflow: hidden;
}
</style>
</head></p> <p><body>
<div class="box">
css3截取字符串多行,css3截取字符串多行,css3截取字符串多行,css3截取字符串多行,css3截取字符串多行,
</div>
</body>
</html>
Copy after login

The above is the detailed content of Use css3 to truncate text and add ellipses. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template