text-overflow: ellipsis 无效的解决方案

一个简单的需求,要展示用户的微信名,有的人喜欢把微信名起的很长,导致一个框框显示不下,于是用到了 text-overflow 的属性。代码如下:

width: 90%;
margin: 0 auto;
overflow: hidden;
font-size: 14px;
color: #fff;
text-align: center;
text-overflow: ellipsis;

可效果不是我想要的

解决方案

可以看出问题出在换行,加一句white-space: nowrap;即可。

 标签: CSS, 前端开发

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。


  1. 健健
    1#
    健健

    多行文本的溢出省略号,好像没有比较优雅的实现

    May 26th, 2018 at 01:05 am 回复
      1. 在webkit内核下还有方法,跨浏览器就不行了。

        May 27th, 2018 at 08:34 am 回复


最新文章