CSS -webkit-box-orient: vertical属性编译后丢失问题

G9YH 发布于2019-08-30 10:52 / 2435人阅读

摘要：二解决办法网上找了一个可行的解决方案，把关掉，有一种写法这样确实解决了编译丢失的情况，但会在编译过程中报，最后到上找到最佳解决方案如下问题完美解决，也不报了。

一、起因

需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。

二、解决办法

网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法：

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

问题完美解决，也不报warning了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114622.html

技本功丨呀~我不会写CSS之vertical-align（上集）

摘要：某日阅读世界，笔者的一段话鞭挞了我的灵魂。原文是这样的说到这里，我就忍不住多说两句。很多其实工作很多年的前端开发人员，也可能不知道的属性值支持数值，更不知道支持负值，这着实让我很意外。只显示文本的时候行高是。上集完敬请期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日阅读《CSS世界》，笔者的一段话鞭挞...

tianlai 2019-08-30 15:55 评论0 收藏0
前端代码评审 Checklist 清单

摘要：从而辅助整个团队提高代码质量统一代码规范。如果你的团队还没有这么一份代码评审清单，也许这正是你需要的如果你的团队已经有了代码评审参照标准，这份清单也许能起到锦上添花的效果。如果违反这个规则，那么代码会很难被测试或者重用。前言前端团队有评审代码的要求，但由于每个开发人员的水平不同，技术关注点不同，所以对代码评审的关注点不同，为了保证代码质量，团队代码风格统一，特此拟定...

xzavier 2019-08-23 18:33 评论0 收藏0
2019届校招前端面试题整理——HTML、CSS篇

摘要：前言届校招陆陆续续开始了，整理了一些高频的面试题。标签提供给页面的一些元信息名称值对，有助于。开启缺点一个是不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。用于设置或检索元素的缩放比例，值为即使用元素的实际尺寸。前言 2019届校招陆陆续续开始了，整理了一些高频的面试题。 HTML部分 1. 什么是？ DOCTYPE是html5标准网页声明，且必须声明在HTML文档...

Turbo 2019-08-29 16:21 评论0 收藏0
2019届校招前端面试题整理——HTML、CSS篇

摘要：前言届校招陆陆续续开始了，整理了一些高频的面试题。标签提供给页面的一些元信息名称值对，有助于。开启缺点一个是不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。用于设置或检索元素的缩放比例，值为即使用元素的实际尺寸。前言 2019届校招陆陆续续开始了，整理了一些高频的面试题。 HTML部分 1. 什么是？ DOCTYPE是html5标准网页声明，且必须声明在HTML文档...

Tamic 2019-08-02 11:13 评论0 收藏0
HTML 面试题总结

摘要：不区分大小写的声明是在中，声明引用，因为基于。标签名必须用小写字母。应当写在中，以避免页面元素由于样式确实造成瞬间的白页或者给用户闪烁感。一旦遇到错误，立刻停止解析，并显示错误信息。，，不支持，，，支持。 doctype(文档类型) 的作用是什么？声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。有以下两个值：怪异模式，浏览器使用自己的怪异模式解...

oujie 2019-08-02 10:14 评论0 收藏0
踩坑日记(持续更新...)

摘要：二按照官方的提示解决了意思就是切到分支，自己的分支解决冲突，提交。这是和二相反向的操作页面标题无效的解决办法强类型转换的坑条件用正则返回的布尔值结果返回了条件结果也返回了。 2018/3/2 1,vue的{{}}怎么失效了项目使用了twig模板渲染语法{{}}冲突，使用v-text v-html渲染可以写表达式的写法字符+变量 2，函数防抖节流封装实用的下拉加载更多代码demo...

taoszu 2019-08-22 15:00 评论0 收藏0