CSS实现单行与多行文字省略(truncation)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS实现单行与多行文字省略(truncation),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1758字,纯文字阅读大概需要3分钟。
内容图文
![CSS实现单行与多行文字省略(truncation)](/upload/InfoBanner/zyjiaocheng/416/289236450ec44f89945d74f84f188e4d.jpg)
html代码如下:
<div class="container"> <div class="box"> <div class="box-content"> <h5 class="box-content-title">A公司</h5> <div class="box-content-desc singleline">A公司是B公司的重要战略伙伴,致力于为C行业提供一站式 解决方案,目前处于高速发展期。公司旗下有四个事业部,业务主要涵盖以下三个方面,2016年公司 年营业额达到100万元。 </div> <div class="box-content-desc multiline">A公司是B公司的重要战略伙伴,致力于为C行业提供一站式 解决方案,目前处于高速发展期。公司旗下有四个事业部,业务主要涵盖以下三个方面,2016年公司 年营业额达到100万元。 </div> <a class="box-content-link" href="javascript:void(0);">查看 >></a> </div> </div> </div>
通用的css样式如下:
.container { margin: 50px auto; width: 328px; } .box { background: #f7f7f7; } .box-content { padding: 20px; } .box-content-title { margin: 0 0 20px; } .box-content-desc { color: #333; font-size: 14px; line-height: 1.5; margin-bottom: 10px; overflow: hidden; } .box-content-link { color: #006ec8; font-size: 14px; text-decoration: none; }
注意上面的 overflow: hidden; 要保留。
单行文字溢出省略:
1singleline{
2 text-overflow: ellipsis;
3 white-space: nowrap;
4 }
text-overflow属性规定了如何显示溢出的文字内容,它的属性值可以是elipsis(...)、clip(截断)、自定义的字符串,我在chrome试了下,发现自定义字符串不好用。
再看多行文字溢出省略:
.multiline { display: -webkit-box; text-overflow: ellipsis;; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
可以看到这里用到了不规范的css写法,即,带webkit前缀的写法(webkit内核浏览器私有属性),还有就是用到了一些过时的写法,
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
这里就不多解释了(其实是解释不明白),多行省略的方法不太好。以后再研究其他比较好的方法吧。
内容总结
以上是互联网集市为您收集整理的CSS实现单行与多行文字省略(truncation)全部内容,希望文章能够帮你解决CSS实现单行与多行文字省略(truncation)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。