在项目中发现系统右上角显示的用户名过长时，无法正常显示，用户名所在的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表示溢出内容为隐藏。
以下就是显示的效果~
