Home > Article > Web Front-end > Use css3 to truncate text and add ellipses
Use css3 to truncate text and add ellipses
- PHPzOriginal
- 2017-04-02 10:28:411997browse
Code display:
overflow : hidden; /*text-overflow: ellipsis; 有些示例里需要定义该属性，实际可省略*/ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
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>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!