在此需要用到三个属性配合使用:

overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分省略号显示*/
实例:
<p>
兴高采烈的破蛹 重获新生的冲动 寻找爱情世界 美梦
既然不是毛毛虫 就要壮烈的扑火 短暂青春要像 烟火
</p>
css代码:
<style>
*{
    margin: 0;
    padding: 0;
}
p{
    width: 100px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
</style>

效果如下:

如何让多文本内容只显示一行,其余用省略号来显示

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-12
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-09-15
  • 2022-12-23
  • 2021-07-10
  • 2022-12-23
相关资源
相似解决方案