CSS: 通过CSS控制字符串长度（一行或者多行）

2024年1月16日 119次阅读 来源: 白白白
  • 一行时，超出长度的部分变为省略号
.text-hidden {
  width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

注：通过width来控制字符串长度

  • 多行时，在第n行超出的部分变为省略号
.text-ellipsis {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

注：通过-webkit-line-clamp来控制你要在第几行省略。默认编译的时候，-webkit-box-orient: vertical;会被过滤，通过以上注释的写法才可生效，或者在react项目中，在对应需要加样式的地方添加style属性：style={{WebkitBoxOrient: “vertical”}}也可生效

    原文作者：白白白
    原文地址: https://segmentfault.com/a/1190000017060328
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞