单行英文文本超出部分显示为省略号

 事实上单行文本超出显示为省略号只需要给元素一个固定宽度，加上下面三行代码

.box {
 width: 100px;
 white-space: nowrap; 
 overflow: hidden;
 text-overflow: ellipsis;
}

但是有时候会发现设置了这三个属性却不生效的情况，那么有可能就是因为这个元素设置了 display：flex 属性，该属性会影响文本的超出隐藏

解决办法是取消设置 display：flex，或设置为 display: -webkit-box，加上 text-align: center;

就可以使文字水平居中，同时超出部分也会隐藏为省略号