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

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



关于我

about me

sailor

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

联系我

最新文章