谈谈text-overflow的那些坑和应对方法

nodejh 发布于2019-08-29 16:26 / 1666人阅读

摘要：基本语法默认值，将溢出的文本裁减掉将溢出的文本用省略号来表示设置一个字符串用来表示溢出的文本兼容性上，除了外，其余两个属性兼容到了，所以大可放心使用。

原文地址：https://www.xksblog.top/the-p...

text-overflow是CSS3中的属性，它规定了当文本溢出其包含元素时以何种方式显示。但在使用的时候，有时会发现这个text-overflow设置了属性怎么不起作用呀？现在我们就来踩踩这里面的坑。

text-overflow 基本语法

text-overflow: [ clip | ellipsis | ]{1,2}

clip：默认值，将溢出的文本裁减掉

ellipsis：将溢出的文本用省略号(...)来表示

：设置一个字符串用来表示溢出的文本

兼容性上，除了外，其余两个属性兼容到了IE6+，所以大可放心使用。

text-overflow: ellipsis;  /* IE 6, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
-o-text-overflow: ellipsis;  /* Opera 9-10 */

text-overflow的那些坑 1. 溢出？不关我的事

text-overflow只是规定了文本溢出后的显示样式，但它不会强制文本溢出，这也就是很多时候，我们虽然设置了text-overflow: ellipsis，但文本其实没有表现出"溢出"特性，所以当然也就不起作用。

解决方法：

width: 100%;  /*也可以是固定值、min-width这些*/
white-space: nowrap;  /*强制文本不能换行*/
overflow: hidden;  /*隐藏溢出内容*/
text-overflow: ellipsis;

如果是、这种行内元素，请再加上display: block，因为行内元素的默认宽度就是文字的宽度且无法设置width

2. 单行溢出 VS 多行溢出

效果对比：

相比单行溢出，多行溢出就要更为复杂一点，要用到伸缩盒子的概念：display: -webkit-box;。

估计也就这时候能看到这个概念了，现在display:flex已经取代了box这种不正规的写法。

具体代码参考：

width: 100%;
overflow: hidden;
word-break: break-all;  /*允许在单词内换行，更美观*/
text-overflow: ellipsis;
display: -webkit-box;  /*元素作为box伸缩盒子*/
-webkit-line-clamp: 3;  /*设置文本行数限制*/
-webkit-box-orient: vertical;  /*设置文本排列方式*/

这个方法合适WebKit浏览器以及移动端，其他浏览器的实现方案可以参考以下文章：

关于文字内容溢出用点点点(…)省略号表示
黑科技：CSS 定制多行省略
多行文本溢出显示省略号(…)全攻略

以上是我对text-overflow的一些浅显理解，哪里有错误之处还望指正。更多进阶高能的方法在上面的参考文章中都有提到，等以后用到了再好好研究下。

学习总是由浅入深，也没办法一下子吃成个大胖子，希望以后能不断重构自己的知识体系，分享更有深度的文章~

私有云 idc机房托管谈谈对php的理解 webrtc是怎样应对网络变化的 text-overflow 那些奇怪的错误

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113745.html

谈谈如何用CSS处理文本格式

摘要：一个长单词超出整个容器宽度时是否换行必须注意到，这是一个长单词便超出容器宽度的情况，而且只需考虑英文，中文没有此特性。规定如何处理内容溢出容器属性作用于型元素上。前言文本方面的CSS内容不少，但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么，今天仅仅来谈谈其中最复杂的部分——文本格式。处理换行、空格和Tab：white-space 众所周知，...

source 2019-08-28 18:28 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
快收藏！52篇25万字，微服务、云原生、容器、K8S、Serverless精华文章集锦

摘要：正在走远，新年之初，小数精选过去一年阅读量居高的技术干货，从容器到微服务云原生，汇集成篇精华集锦，充分反映了这一年的技术热点走向。此文值得收藏，方便随时搜索和查看。，小数将继续陪伴大家，为朋友们奉献更有逼格的技术内容。 2017正在走远，新年之初，小数精选过去一年阅读量居高的技术干货，从容器、K8S 到微服务、云原生、Service Mesh，汇集成52篇精华集锦，充分反映了这一年的技...

AaronYuan 2019-07-01 16:38 评论0 收藏0
面试试题总结

摘要：闲心面试题一任选一题分的区别的区别是无序列表，是有序列表，是定义列表有层次关系。无任何语义，仅仅用作样式化或者脚本化的钩子是有一定语义的，适合有主题性的内容，表示一个专题，一般有标题，但是不可以乱用。诞生于年，由等人创建，后为所收购。闲心面试题一、任选一题（5分）a) ul、ol、dl的区别？b) div、section、article的区别？ a:ul是无序列表，ol是有序列表，...

alaege 2019-08-19 18:05 评论0 收藏0
谈谈机器学习与传统编程之间的区别

摘要：机器学习也是这个大筐中的一个组成部分。我们目前的发展阶段是机器学习正处在第二级和第三级交界处。机器学习工程师的职位是怎样的机器学习工程师的位置更具有技术性。换句话说，机器学习工程师与传统的软件工程有着比数据科学更多的相同点。翻译：疯狂的技术宅https://towardsdatascience.co... showImg(https://segmentfault.com/img/b...

王岩威 2019-06-26 18:58 评论0 收藏0