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

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

# 一行超出显示省略

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

1
2
3

演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字

[vanilla]

<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>

复制代码

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

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

1
2
3
4
5
6

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

[vanilla]

<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>

复制代码

编辑

上次更新: 2022/05/09, 18:40:41

← 「布局技巧」图片未加载前自动撑开元素高度从box-sizing属性入手，了解盒子模型→