截断文本

截断超过一行的文本，在末尾添加省略号（…）。

• 使用 overflow: hidden 防止文本溢出其尺寸。
• 使用 white-space: nowrap 防止文本超过一行的高度。
• 使用 text-overflow: ellipsis 使文本超过其尺寸时以省略号结尾。
• 为元素指定固定的 width，以确定何时显示省略号。
• 仅适用于单行元素。

<p class="truncate-text">如果我超过一行的宽度，我将被截断。</p>

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}