css:省略超出文字,总结

作者: Rememberautumn 分类: css,Web前端 发布时间: 2016-07-25 20:28 阅读: 1,734

单行省略:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

省略号颜色问题:

目前还没有修改省略号颜色的api,省略号的颜色默认与父元素颜色一致

<p>测试文字<span style=”color:red”>测试文字测试文字测试文字测试文字测试文字</span></p>

这样的省略号颜色将是p的颜色,与span的颜色不一致,可以将p的颜色改成span颜色,再更改其他文字颜色,达到效果。

多行文版截断并出现省略号的纯CSS解决一直是个“复杂的难题“,不过有个“被废弃”的 webkit 私有属性反而可以实现,而且在移动端的兼容性不错, iOS 与 Android 均有不错的支持

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注