首页 > 代码库 > 多行文本省略号的实现.html
多行文本省略号的实现.html
多行文本省略号的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 {
width: 300px;
height: 200px;
border: 1px solid #ccc;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:6;
-webkit-box-orient:vertical;
}
}
</style>
</head>
<body>
<div class="d1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus qui, sed laudantium?
Hic facilis eius eveniet quisquam, voluptatibus molestias, soluta. Odit dicta et omnis
fugiat magnam commodi reiciendis consequatur quosLorem ipsum dolor sit amet, consectetur
adipisicing elit. Impedit quis dolore, assumenda veniam deserunt suscipit maxime, magni
doloremque excepturi praesentium ea ullam earum rem vel voluptatibus ex omnis odio ipsum.
</div>
</body>
</html>
需要知道的几个属性:
- text-overflow: ellipsis:用来实现单行文本的溢出显示省略号(...);在多行文本的情况下,用省略号(...)隐藏超出范围的文本
- display: -webkit-box:将对象作为弹性伸缩盒子模型显示
- -webkit-line-clamp:6:用来限制在一个块元素显示文本的行数
- -webkit-box-orient:vertical:设置或检索伸缩盒对象的子元素排列方式
多行文本省略号的实现.html
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。