文字在一行或两行时超出显示省略号

一行超出显示省略

css

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

:::demo [vanilla]

html

<html>
  <div class="box-42b6">
    演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字
  </div>
</html>
<style>
  .box-42b6 {
    border: 1px solid #999;
    width: 200px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

:::

两行（多行）超出显示省略号

css

overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

显示的行数由line-clamp样式的值决定。

:::demo [vanilla]

html

<html>
  <div class="box2-42b6">
    演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字
  </div>
</html>
<style>
  .box2-42b6 {
    border: 1px solid #999;
    width: 200px;

    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>

:::

一行超出显示省略 ​

两行（多行）超出显示省略号 ​

一行超出显示省略

两行（多行）超出显示省略号