本文摘自PHP中文网,作者藏色散人,侵删。
css实现超出两行显示省略的方法:首先创建一个HTML示例文件;然后在body中定义好文字内容;最后在style中通过设置属性“-webkit-line-clamp: 2;overflow: hidden;”来实现超出省略效果。
本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑
CSS实现文本超过部分,超出两行,超出部分省略号显示
文字超过部分显示为省略号
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style>
.p{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<body>
<p class = "p" >
我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
</p>
</body>
|
文本超出两行,超出部分省略号显示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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怎么实现超出两行显示省略的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何设置行间距和字间距
css list-style-position属性怎么用
css垂直对齐不起作用的原因及解决方法
css如何清除浮动?clear和bfc方法介绍
css居中对齐怎么设置
css如何让块无间隙
css3中渐变属性有哪些
前端工程师需要掌握哪些知识?
如何解决element ui css出错问题
css有继承关系吗
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么实现超出两行显示省略