标示对象内溢出文本

Posted 2021-02-06 kunmomo

前言

有些时候在一个模块内容过多时，我们希望以“...”来表达还有更多内容，接下来我们来看如何实现这一效果

情况一：一行文字显示“...”

方法一：使用text-overflow:ellipsis

div {
    display: inline-block;
    overflow: hidden;
    max-width: 20.625rem;
    white-space: nowrap;
    text-overflow: ellipsis;  
}

• 该属性适于用块元素或行内块元素，如果是行内元素需要使用display:block/inline-block
• 我们需要给元素设置width/max-width
• 需要设置overflow:hidden注意不能放在最后
• 同时还要设置white-space:nowrap强制文本不能换行

情况二：一个段落文字显示“...”

方法一：使用display:-webkit-box

 

div {
     display: -webkit-box;
     -webkit-line-clamp: 6;
     -webkit-box-orient: vertical;  
}

 

• 该属性要和-webkit-box-orient一起使用来控制子元素应该排列的方式
• 使用-webkit-line-clamp来控制显示的行数，这样当超过我们控制的行数时，会自动出现“...”
• 保险起见我们可以也设置overflow:hidden和text-overflow:ellipsis