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

2021-02-14 14:20

阅读：529

一行时，超出长度的部分变为省略号

.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"}}也可生效

上一篇：Kubernetes编排工具

下一篇：jquery奇数、偶数选择器

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS: 通过CSS控制字符串长度（一行或者多行）
文章链接：http://soscw.com/index.php/essay/55239.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章