文本超出省略單行多行問題

單行、多行文本截斷問題

<div class="box">
  <p>
    會計師的科技感深加工IE給大家是個我經費等四個技術第三款共計四個積分都交給你電視劇覅二斌發給
  </p>
</div>

單行文本省略

```css
.box {
  width: 200px;
}
p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
```

多行文本省略 (兼容性不好)

.box {
  width: 200px;
}
p {
  /* 將對象作爲彈性伸縮盒子模型顯示 */
  display: -webkit-box;
  /* 定義被截斷文本的行數 unset: 不設置 */
  -webkit-line-clamp: 3;
  /* 設置或檢索伸縮盒對象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

多行文本省略

div {
  /* 單行  */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 多行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}