html 一行或多行文字超出部分显示省略号。为最后一个元素添加样式

原创于 2018-12-12 18:15:10 发布 · 781 阅读

1 ·

CC 4.0 BY-SA版权

jsp 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，包括具体的代码示例和实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//一行文字溢出部分显示省略号
.ellipsis{
  overflow: hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
  white-space:nowrap;//文本不会换行（单行文本溢出）
  width:130px;
  background-color: red;
}

<div class="ellipsis">
    单行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>

//多行溢出部分显示省略号
.mult_line_ellipsis{
  overflow: hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
  display: -webkit-box;
  -webkit-line-clamp: 3;//显示几行，这是显示3行
  -webkit-box-orient: vertical;
  width:130px;
  background-color:cornflowerblue;
}
<div class="mult_line_ellipsis">
    多行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>


.div:last-child{/*这里添加属性*/}//给最后一个div添加样式