CSS设置滚动条不占空间、单行/多行文本超出时显示省略号

MDN

• overflow
• text-overflow

滚动条不占空间

overflow: overlay;

行为与auto相同，但滚动条绘制在内容之上而不是占用空间。
仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。

超出文本显示省略号

text-overflow: ellipsis;

这个关键字的意思是“用一个省略号 (’…’, U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。

这个属性并不会强制“溢出”事件的发生，因此为了能让"text-overflow"能够生效，程序员们必须要在元素上添加几个额外的属性，比如"将overflow设置为hidden"。

<div>div, div, div, div, div, div, div</div>
<span>span, span, span, span, span, span</span>

div {
  text-overflow: ellipsis; /* 超出文本显示省略号 */
  
  /* 为了能让"text-overflow"能够生效 */
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

span {
  text-overflow: ellipsis; /* 超出文本显示省略号 */
  
  /* 为了能让"text-overflow"能够生效 */
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  display: inline-block;
}

多行文本时显示省略号

以上方法只适用于单行文本的情况，若需要在多行文本时显示省略号，则需要使用webkit私有属性：

div, span {
  /* 多行文本时显示省略号 */
  -webkit-line-clamp: 2; /* 指定的行数 */
  
  /* 为了能让"-webkit-line-clamp"能够生效 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100px;
}