css单行和多行文字省略

单行文字省略:

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

        text-overflow:ellipsis;//文本溢出显示省略号
        white-space:nowrap;//文本不会换行

多行文字省略:

  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;//控制文本的行数
  -webkit-box-orient: vertical;

        -webkit-line-clamp控制文本行数，需要与其他的WebKit属性一起使用。display:-webkit-box;必须一起使用的属性，将对象作为弹性伸缩盒子模型显示。-webkit-box-orient必须一起使用的属性，设置或检索伸缩盒对象的子元素的排列方式。text-overflow:ellipsis;，用来在多行文本的情况下用省略号“…”隐藏超出范围的文本。

标签：box,省略,text,单行,webkit,ellipsis,overflow,文本,css
来源： https://blog.csdn.net/weixin_44059045/article/details/121032125