本文摘自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中display:hidden和display:none有什么区别
css背景超出宽度怎么办
网页布局的时候先写html还是先写css
css怎么设置图片拉伸
css div不随滚动条移动的实现方法
css怎么设置图片拉伸不重复
css quotes属性怎么用
html文档中怎么把图片作为背景?
css怎么将文字底对齐
html和css重难点知识点总结
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么实现超出两行显示省略