CSS：实现过长的文字显示...（省略号）

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

以下就是显示的效果~