在项目中发现系统右上角显示的用户名过长时,无法正常显示,用户名所在的div会跑到下面去,发现这个问题后,我有三种思路,一个是用户在注册的时候,控制其输入的用户名不要过长,这是一种不友好的方法,一般来说用户会使用自己的姓名全拼之类的作为用户名,这样限制的话会影响用户的正常使用;二是使用用户名过长时,自动折行显示的方法,在网上找了一下类似的使用方法,发现显示效果也不理想;最后一种就是过长的文字使用省略号显示,这样既不会影响用户的使用,看起来也比较规范。
在使用的时候只需要将以下的css样式绑定到用户名显示所在的div就好:
.test {width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
其中注意以下几点:
1、宽度一定要设置,可以根据实际需求调整,这里我用了200px显示比较适合;
2、white-space: nowrap是禁止文字折行;
3、text-overflow表示当文本溢出时是否显示省略标记,有两个值:
clip:不显示省略标记(...),而是简单的裁切;
ellipsis:当对象内文本溢出时显示省略标记(...);
4、overflow:hidden表示溢出内容为隐藏。
以下就是显示的效果~