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

Terry_Tai 发布于2019-08-29 17:18 / 3102人阅读

摘要：一行时，超出长度的部分变为省略号注通过来控制字符串长度多行时，在第行超出的部分变为省略号注通过来控制你要在第几行省略。默认编译的时候，会被过滤，通过以上注释的写法才可生效，或者在项目中，在对应需要加样式的地方添加属性也可生效

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

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

GPU云服务器云服务器通过CSS 多行合成一行多行转一行多行数据输出为一行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114238.html

前端代码编写规范

摘要：前端代码规范代码编写规范缩进每一层级由个空格组成，避免使用制表符进行缩进。单目运算符的操作数之间不应该用空白隔开语句中的表达式之间应当用空格隔开代码编写规范头部文档类型建议使用格式的。内联元素写在一行内，块状元素还有列表和表格要另起一行。前端代码规范 JavaScript代码编写规范缩进每一层级由4个空格组成，避免使用制表符（Tab）进行缩进。行的长度每行长度不应该超过80个...

liangdas 2019-08-23 11:49 评论0 收藏0
团队合作前端书写习惯总结

摘要：函数的名字前缀为动词，以此区分变量和函数示例函数命名命名方法小驼峰式命名法命名规范前缀应当为动词命名建议可使用常见动词约定动词含义返回值判断是否可执行某个动作权限函数返回一个布尔值。含有此值不含有此值判断是否为某个值函数返回一个布尔值。CSS 规范 CSS 书写规范 class类：小写字母,-分割；图片: 小写字母，‘-’或者‘_’ 分...

番茄西红柿 2019-04-23 13:17 评论0 收藏0
CSS 编码规范

摘要：一书写规范缩进使用个空格做为一个缩进层级。尽量最多控制在级以内。数值当数值为之间的小数时，省略整数部分的。长度长度为时须省略单位。二命名规范类名使用小写字母，以中划线分隔。采用驼峰式命名等中的变量函数混合采用驼峰式命名。一、CSS 书写规范缩进使用 4 个空格做为一个缩进层级。 .selector { margin: 0; padding: 0; } 空格 1.选...

AbnerMing 2019-08-29 17:27 评论0 收藏0
flex基础布局详解

摘要：系统性的介绍关于布局，也作为自学的一篇文章基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。属性一个布局的页面所具有的元素可分为类。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 flex-tutorials 系统性的介绍关于flex布局，也作为自学的一篇文章 flex基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充...

nemo 2019-08-30 15:53 评论0 收藏0