Artsmp

Appearance

Return to top
On this page

关于 css 显示省略号的几种方式

单行固宽

html
<style>
  .one-line {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
演示效果

关于 css 显示省略号的几种方式

单行不固宽或者多行不固宽

html
<style>
.show-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 指示行数 */
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
演示效果

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit dolorum beatae, quos quas, ipsum animi est velit neque expedita cumque unde reiciendis ratione, itaque possimus vitae ad eos? Nihil, recusandae?