如何实现单⾏/多⾏⽂本溢出的省略样式?

简介: 如何实现单⾏/多⾏⽂本溢出的省略样式?

啥也不管了,直接复制粘贴以下代码去对应的盒子

overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    overflow: hidden;
    word-break: break-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical !important;


  1. overflow: hidden;:这个属性用于设置元素的溢出内容是否显示。当设置为"hidden"时,超出元素的内容将被隐藏。
  2. text-overflow: ellipsis;:这个属性用于设置文本溢出时的显示方式。当设置为"ellipsis"时,超出的文本将被替换为省略号(...)。
  3. display: -webkit-box !important;:这个属性用于设置元素的显示方式。"-webkit-box"是Webkit浏览器引擎的一个盒模型,"!important"表示这个属性的优先级非常高,会覆盖其他同样设置该元素的样式。
  4. overflow: hidden;:这个属性再次出现,与前面的"overflow: hidden;"作用相同,都是用于设置元素的溢出内容是否显示。
  5. word-break: break-all;:这个属性用于设置如何处理单词或长单词的换行。当设置为"break-all"时,无论单词内部是否有空格,都会强制换行。
  6. -webkit-line-clamp: 1;:这个属性用于设置在一个块级元素中最多显示的行数。"1"表示最多显示一行。
  7. -webkit-box-orient: vertical !important;:这个属性用于设置元素的盒子方向。"vertical"表示垂直方向,"!important"表示这个属性的优先级非常高,会覆盖其他同样设置该元素的样式。

相关文章
|
5月前
|
人工智能 弹性计算 前端开发
如何实现单行/多行文本溢出的省略样式?
如何实现单行/多行文本溢出的省略样式?
|
10月前
|
容器
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
|
5月前
|
前端开发 容器
五种css溢出隐藏的方法----亲测可用
五种css溢出隐藏的方法----亲测可用号。
84 0
|
6月前
|
前端开发 容器
css溢出隐藏省略号不生效如何解决?
css溢出隐藏省略号不生效如何解决?
79 0
|
9月前
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
41 0
|
10月前
|
前端开发 JavaScript SEO
b标签和strong标签的区别?css单行或多行溢出隐藏如何实现?浅谈this?
b标签只是文本加粗,而strong除了加粗还有强调的语义。
|
前端开发 JavaScript
css控制文本超出省略(单行、两行、多行)
想要控制文本长度? 想要文本超出隐藏? 还想要不用JavaScript实现? 让我们来用css试试吧~
178 0
|
前端开发
css超出部分省略(单行、多行,多种方法实现)
这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据
119 0
css超出部分省略(单行、多行,多种方法实现)
|
Web App开发 前端开发 iOS开发
小技巧!CSS 整块文本溢出省略特性探究
小技巧!CSS 整块文本溢出省略特性探究
155 0
小技巧!CSS 整块文本溢出省略特性探究
|
缓存 API
如何写出高质量的代码 data 组件 函数 注释 命名 变量的次数
如何写出高质量的代码 data 组件 函数 注释 命名 变量的次数