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视频教程》
原文地址:https://www.jb51.cc/css/1206162.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。