当前位置: 首页 > news >正文

-webkit-box-orient属性丢失?

        在实际项目场景当中,我们经常会遇到需要对超长文本溢出省略的场景:

我们经常会这样写——

单行省略:

    overflow: hidden; //文本溢出隐藏text-overflow: ellipsis; //文本溢出显示省略号white-space: nowrap; //不换行

多行省略:

      display: -webkit-box; /**对象作为伸缩盒子模型展示**/-webkit-box-orient: vertical;-webkit-line-clamp: 2; /**显示的行数**/overflow: hidden; /**隐藏超出的内容**/text-overflow: ellipsis; /* 溢出显示省略号 */

        在一个新项目中,我需要设置两行溢出省略,然后我还是按照旧的方式写上去,这个时候我发现,在页面中并没有生效。。。

        然后我去查看了浏览器上面生效的样式属性,如图:

        这个时候我们会发现,-webkit-box-orient: vertical;这个属性没有在浏览器生效,丢失了!然后我去查找了相关资料,再代码中加了一行/* autoprefixer: ignore next */,如下:

      display: -webkit-box; /**对象作为伸缩盒子模型展示**//* autoprefixer: ignore next */-webkit-box-orient: vertical;-webkit-line-clamp: 2; /**显示的行数**/overflow: hidden; /**隐藏超出的内容**/text-overflow: ellipsis; /* 溢出显示省略号 */

        浏览器样式渲染 

        此时浏览器上便可以按照我们的预期正常展示了!

http://www.lryc.cn/news/465472.html

相关文章:

  • openKylin系统SSH服务配置结合cpolar轻松实现开放麒麟远程连接
  • 我的世界之合成
  • java基于SpringBoot+Vue+uniapp微信小程序的自助点餐系统的详细设计和实现(源码+lw+部署文档+讲解等)
  • AI 编译器学习笔记之八 -- Python基础学习
  • 盘点近几年腾讯的精选面试题(c/c++研发岗)
  • C++详细笔记(四)
  • 架构师备考-背诵精华(系统架构评估)
  • QT 实现自定义水波进度条
  • 厨房老鼠数据集:掀起餐饮卫生监测的科技浪潮
  • Linux系统:more命令
  • ESP32-S3学习笔记:分区表(Partition Table)的二进制分析
  • 04,perl
  • Js 更加优雅地实现Form表单重置
  • 基于微信小程序的驾校预约系统设计与实现
  • 利用python进行数据处理,得到对自己有利的内容
  • Java面试题五
  • 2013 lost connection to MySQL server during query
  • 【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-1
  • Android便携式WLAN热点分析
  • 从经济学原理看团队分工合作
  • 企业一级流程架构规划方法
  • 用ESP32驱动stt7735 TFT屏幕
  • Yolo目标检测:Yolo v1简介
  • Java動態轉發代理IP詳解
  • Android15之解决gdb:Remote register badly formatted问题(二百三十六)
  • 【Router】路由器中NAT、NAPT、NPT是什么?
  • 代码随想录算法训练营第三十九天|背包问题,416. 分割等和子集
  • 可调用对象和Lambda
  • 华为认证HCIE存储考啥?未来发展方向在哪?一个月就能轻松拿下?
  • 如何让自己的网站,被更多的人搜索到(免费方案)