Rumah >hujung hadapan web >tutorial css >使用css3截断文本并加省略号
使用css3截断文本并加省略号
- PHPzasal
- 2017-04-02 10:28:412019semak imbas
代码展示：
overflow : hidden; /*text-overflow: ellipsis; 有些示例里需要定义该属性，实际可省略*/ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
概述
-webkit-line-clamp是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
全部代码：
<!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>Atas ialah kandungan terperinci 使用css3截断文本并加省略号. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：介绍css3过渡和动画有哪些区别Artikel seterusnya：使用css实现加载中动画效果