文本溢出显示省略号如何实现?

2021-03-03 10:31发布

3条回答

(1)单行文本溢出显示省略号

P{
   width:200px; /*限定盒子的宽度*/
   overflow:hidden;   /*给元素设置溢出隐藏属性*/
   text-overflow:ellipsis;  /*文本溢出显示省略号*/
   white-space:nowrap; /*文本不换行*/
}

(2)多行文本溢出显示省略号

方法1:利用WebKit的CSS扩展属性(只有-webkit内核才有作用)

P{
   width:200px; /*限定盒子的宽度*/
   overflow: hidden; /*给元素设置溢出隐藏属性*/
   text-overflow: ellipsis; /*文本溢出显示省略号*/
   display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数,这是一个不规范的属性,它没有出现在 CSS 规范草案中。*/
  -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
}

方法2:利用伪元素模拟溢出显示省略号的效果(兼容性比较好)

实现要点:

将height设置为line-height的整数倍,防止超出的文字露出。

给 .p1:after 添加渐变背景可避免文字只显示一半。

 


刘家起 - coding
3楼 · 2021-03-04 16:38

(1)单行文本溢出显示省略号

P{
   width:200px; /*限定盒子的宽度*/
   overflow:hidden;   /*给元素设置溢出隐藏属性*/
   text-overflow:ellipsis;  /*文本溢出显示省略号*/
   white-space:nowrap; /*文本不换行*/
}

(2)多行文本溢出显示省略号

方法1:利用WebKit的CSS扩展属性(只有-webkit内核才有作用)

P{
   width:200px; /*限定盒子的宽度*/
   overflow: hidden; /*给元素设置溢出隐藏属性*/
   text-overflow: ellipsis; /*文本溢出显示省略号*/
   display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数,这是一个不规范的属性,它没有出现在 CSS 规范草案中。*/
  -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
}

方法2:利用伪元素模拟溢出显示省略号的效果(兼容性比较好)

实现要点:

将height设置为line-height的整数倍,防止超出的文字露出。

给 .p1:after 添加渐变背景可避免文字只显示一半。


请叫我雷锋叔叔啊
4楼 · 2021-03-04 19:28

(1)单行文本溢出显示省略号

P{
    width:200px; /*限定盒子的宽度*/
    overflow:hidden;   /*给元素设置溢出隐藏属性*/
    text-overflow:ellipsis;  /*文本溢出显示省略号*/
    white-space:nowrap; /*文本不换行*/
}

(2)多行文本溢出显示省略号

方法1:利用WebKit的CSS扩展属性(只有-webkit内核才有作用)

P{

方法2:利用伪元素模拟溢出显示省略号的效果(兼容性比较好)

实现要点:

将height设置为line-height的整数倍,防止超出的文字露出。

给 .p1:after 添加渐变背景可避免文字只显示一半。