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

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

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

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"表示这个属性的优先级非常高,会覆盖其他同样设置该元素的样式。

相关文章
|
8月前
uniapp三元表达式判断状态更改字体颜色?
uniapp三元表达式判断状态更改字体颜色?
|
8月前
|
人工智能 弹性计算 前端开发
如何实现单行/多行文本溢出的省略样式?
如何实现单行/多行文本溢出的省略样式?
每次生成代码注释后 然后把生成的代码插入原代码位置后 方法原来的注解就会错位
每次生成代码注释后 然后把生成的代码插入原代码位置后 方法原来的注解就会错位
41 1
|
2月前
DwCC2018双字节内联输入怎么实现?
Dw CC 2018怎么设置允许双字节内联输入?在使用一个Dw CC 2018,有时候需要设置允许双字节内联输入,小编告诉大家怎么设置?
48 21
|
7月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
7月前
|
Web App开发 前端开发 JavaScript
如何去掉溢出内容的overflow属性滚动条
如何去掉溢出内容的overflow属性滚动条
350 1
|
容器
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
240 0
|
前端开发 JavaScript SEO
b标签和strong标签的区别?css单行或多行溢出隐藏如何实现?浅谈this?
b标签只是文本加粗,而strong除了加粗还有强调的语义。
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
75 0
|
搜索推荐 前端开发 JavaScript
meta标签有哪些属性和属性值?li设为行内块时有间隙怎么办?call、apply和bind的作用和区别?
`meta`标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。`meta`标签位于文档的头部,不包含任何内容。`meta`标签的属性定义了与文档相关联的名称/值对。