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

2018-03-12 约 1 分钟读完搬砖秘籍

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

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

可效果不是我想要的

解决方案

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