Use css3 to truncate text and add ellipses-CSS Tutorial-php.cn

Use css3 to truncate text and add ellipses

PHPz

Release： 2017-04-02 10:28:41

Original

2046 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!