CSS文本加省略号

通常的文本末尾有三个点的省略号,可以通过 CSS 实现

解决方式

  1. 在文本确定宽度的前提下加入以下样式即可
1
2
3
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

可能存在的问题

  1. 在 flex 布局下会发现省略号不出现
  2. 这时候需要在父元素添加一个 overflow: hidden 即可