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

原文:https://segmentfault.com/a/1190000016089746

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

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

text-overflow 基本语法

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

  • clip默认值,将溢出的文本裁减掉
  • ellipsis:将溢出的文本用省略号(...)来表示
  • <string>:设置一个字符串用来表示溢出的文本

兼容性上,除了<string>外,其余两个属性兼容到了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;
  • 如果是<a><span>这种行内元素,请再加上display: block,因为行内元素的默认宽度就是文字的宽度且无法设置width

2. 单行溢出 VS 多行溢出

效果对比:
<script async src="//jsfiddle.net/stay1100/zxrfy5gj/embed/result,html,css/dark/"></script>

相比单行溢出,多行溢出就要更为复杂一点,要用到伸缩盒子的概念: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的一些浅显理解,哪里有错误之处还望指正。更多进阶高能的方法在上面的参考文章中都有提到,等以后用到了再好好研究下。

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

posted @ 2019-07-11 11:17  鳳舞九天  阅读(4512)  评论(0编辑  收藏  举报