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

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

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

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

相关文章
|
存储 前端开发 PHP
构建一个简单的网站,包括用户注册、登录功能
构建一个简单的网站,包括用户注册、登录功能
676 1
|
6月前
|
Web App开发 前端开发 JavaScript
Promise.allSettled()方法的兼容性如何?
Promise.allSettled()方法的兼容性如何?
380 75
|
JavaScript Java 关系型数据库
基于springboot+vue在线外卖点餐系统(毕业设计,源码+文档)
基于springboot+vue在线外卖点餐系统(毕业设计,源码+文档)
|
11月前
|
Java
【Java基础面试五】、 int类型的数据范围是多少?
这篇文章回答了Java中`int`类型数据的范围是-2^31到2^31-1,并提供了其他基本数据类型的内存占用和数值范围信息。
【Java基础面试五】、 int类型的数据范围是多少?
|
关系型数据库 PostgreSQL
PostgreSQL pg_orphaned扩展
由于种种原因,PostgreSQL可能会产生一些孤儿文件,这些文件会占用磁盘空间,手工查找费时费力还容易出错,pg_orphaned扩展很好的解决了这个问题。
|
JavaScript API
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
163 0
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的图书馆管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的图书馆管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
103 1
|
Kotlin
找不到 kotlinx.android.synthetic***
找不到 kotlinx.android.synthetic***
369 0
|
人工智能 运维 架构师
数美科技首席架构师陈建:基于云上弹性的高可用实时风控架构实践
2023年10月31日-11月2日,2023云栖大会在中国杭州·云栖小镇举行,北京数美时代科技有限公司首席架构师陈建在【CloudOps云上运维专场】发表了题为《基于云上弹性的高可用实时风控架构实践》的主题演讲,从在线实时风控架构及高可用解决方案等方向做了分享。