发布于 3年前

CSS 布局 截断文本

如果文本长度超过一行,它将被截断并以省略号结束。

HTML

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

CSS

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

说明

  • overflow: hidden 防止文本溢出其尺寸(对于块,100 %宽度和自动高度)。
  • white-space: nowrap 防止文本高度超过一行。
  • text-overflow: ellipsis 使其在文本超出其维度时以省略号结尾。
  • width: 200px; 确保元素具有维度,以知道何时获取省略号

ο 仅适用于单个行元素。

©2020 edoou.com   京ICP备16001874号-3