CSS-超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 110px;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 110px;

说明 ​

text-overflow - CSS（层叠样式表） | MDN

text-overflow属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号或显示一个自定义字符串(firefox)。

举例如下:

测试文本 | 固定宽度300px | 白色文字 | overflow: hidden | 不设置white-space

text-overflow: clip; 测试文本 | 固定宽度300px | 白色文字 | overflow: hidden | 设置white-space:nowrap

text-overflow: ellipsis; 测试文本 | 固定宽度300px | 白色文字 | text-overflow: hidden | 设置white-space:nowrap