原文地址：https://www.xksblog.top/the-p...text-overflow是CSS3中的一个属性，规定当文字溢出时，它包含如何显示元素。但是在使用的时候，有时候你会发现text-overflow属性不起作用？下面我们来踩一下里面的坑。text-overflow基本语法text-overflow:[clip|省略号|]{1,2}clip：默认值，剪切溢出文本ellipsis：用省略号（...）表示溢出文本：设置一个字符串来表示溢出文本的兼容性。除了，其他两个属性都兼容IE6+，可以放心使用。文本溢出：省略号；/*IE6,WebKit(Safari,Chrome),Firefox7,Opera11*/-o-text-overflow:ellipsis;/*Opera9-10*/text-overflow的那些坑1.溢出？这不关我的事。text-overflow只是规定了文字溢出后的显示样式，并不强制文字溢出。这意味着很多时候，虽然我们设置了text-overflow:ellipsis，但是文本实际上并没有显示“溢出”的特性，所以当然也不起作用。解决方案：宽度：100%；/*也可以是固定值，min-width等*/white-space:nowrap;/*强制文本不换行*/overflow:hidden;/*隐藏溢出内容*/text-overflow:ellipsis;如果是、等内联元素，请加上display:block，因为内联元素的默认宽度是文本的宽度，不能设置width2。单行溢出VS多行溢出效果对比：与单行溢出对比，多行溢出比较复杂，需要拉伸框的概念：display:-webkit-box;。估计这个时候就可以看出这个概念了，现在显示：flex已经取代了box这个非正式的写法。具体代码参考：width:100%;溢出：隐藏；分词：break-all；/*允许单词内换行，更美观*/text-overflow:ellipsis;显示：-webkit-box；/*elementasboxstretchablebox*/-webkit-line-clamp:3;/*设置文本行数限制*/-webkit-box-orient:vertical;/*设置文字排列方式*/该方法适用于WebKit浏览器和移动端，其他浏览器实现请参考以下文章：关于文字内容溢出使用点（…）省略号表示黑科技：CSS自定义多-lineellipsis多行文本溢出显示省略号(...)全攻略以上是我对text-overflow的一些简单理解，如有错误请指正。以上参考文章中提到了更高级、更高能的方法，以后用到的时候会仔细研究。学习总是由浅入深，没有办法一下子变成大胖子。希望以后能继续重构自己的知识体系，分享更多有深度的文章~
