首页 > 代码库 > css实现单行，多行文本溢出显示省略号……
css实现单行，多行文本溢出显示省略号……
1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis
实现方法：
<style> .div_text{width: 300px; padding:10px;border:1px solid #001F33; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}</style><div class="div_text"> 单行文本溢出显示省略号，单行文本溢出显示省略号
</div>
效果如图：
2.多行文本溢出，我们可以使用WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
实现方法：
<style>.div_moreline{width: 300px; padding:10px;border:1px solid #001F33;margin-top: 20px;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; line-height: 30px; max-height: 90px;}</style><div class="div_moreline"> 多行文本溢出，我们可以使用WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。多行文本溢出，我们可以使用WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。
</div>
/*
display:-webkit-box;将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical;设置或检索伸缩盒对象的子元素的排列方式 。
-webkit-line-clamp:3;设置显示多少行
*/
效果如图：
css实现单行，多行文本溢出显示省略号……
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。