CSS | 如何实现文本动态截断

1 概述

当窗口大小发生变化时，如何让不跨行的文本自动截断呢？本文给出了代码实现。

2 代码实现

2.1 html

<div class="wrap">
  <div class="text-truncate">
 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的
    一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
    CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  </div>
</div>
<div class="wrap">
  <div class="text-truncate">
    层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的
    一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
    CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  </div>
</div>

2.2 css

.wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.text-truncate {
  display: table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}