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

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

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

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

相关文章
|
7月前
|
人工智能 弹性计算 前端开发
如何实现单行/多行文本溢出的省略样式?
如何实现单行/多行文本溢出的省略样式?
|
28天前
DwCC2018双字节内联输入怎么实现?
Dw CC 2018怎么设置允许双字节内联输入?在使用一个Dw CC 2018,有时候需要设置允许双字节内联输入,小编告诉大家怎么设置?
45 21
|
6月前
|
Web App开发 前端开发 JavaScript
如何去掉溢出内容的overflow属性滚动条
如何去掉溢出内容的overflow属性滚动条
318 1
|
容器
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
203 0
|
前端开发
CSS:实现文本超出显示省略效果(可指定几行显示)
CSS:实现文本超出显示省略效果(可指定几行显示)
|
前端开发 容器
css溢出隐藏省略号不生效如何解决?
css溢出隐藏省略号不生效如何解决?
738 0
|
前端开发 JavaScript SEO
b标签和strong标签的区别?css单行或多行溢出隐藏如何实现?浅谈this?
b标签只是文本加粗,而strong除了加粗还有强调的语义。
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
66 0
|
前端开发 JavaScript
css控制文本超出省略(单行、两行、多行)
想要控制文本长度? 想要文本超出隐藏? 还想要不用JavaScript实现? 让我们来用css试试吧~
208 0
|
前端开发
css超出部分省略(单行、多行,多种方法实现)
这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据
149 0
css超出部分省略(单行、多行,多种方法实现)