广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
css实现超出两行显示省略的方法：首先创建一个HTML示例文件；然后在body中定义好文字内容；最后在style中通过设置属性“-webkit-line-clamp: 2;overflow: hidden;”来实现超出省略效果。
本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑
CSS实现文本超过部分，超出两行，超出部分省略号显示
文字超过部分显示为省略号
<style>.p{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}</style><body> <p class="p"> 我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本 </p></body>登录后复制
文本超出两行，超出部分省略号显示
<style>.p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 这里是超出几行省略 */ overflow: hidden;}</style><body> <p class="p"> 我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本 </p></body>登录后复制推荐学习：《css视频教程》
以上就是css怎么实现超出两行显示省略的详细内容，更多请关注9543建站博客其它相关文章！
发表评论