1.单行文本超出省略
实现方式:
overflow: hidden;
white-space: nowrap; /* 文本不会换行 */
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
实现代码:
<style>
p{
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<body>
<p>用css实现单行文本的溢出显示省略号,同学你会吗/p>
</body>
实现效果:
2. 多行文本超出省略
实现方式:
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式为垂直的 */
-webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */
overflow: hidden;
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端
实现代码:
<style>
div{
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
<body>
<div>
用css实现多行文本的溢出显示省略号,同学你会吗?用css实现多行文本的溢出显示省略号,同学你会吗?用css实现多行文本的溢出显示省略号,同学你会吗?用css实现多行文本的溢出显示省略号,同学你会吗
</div>
</body>
实现效果: