CSS -webkit-box-orient: vertical屬性編譯后丟失問題

G9YH 發(fā)布于2019-08-30 10:52 / 2514人閱讀

摘要：二解決辦法網(wǎng)上找了一個可行的解決方案，把關(guān)掉，有一種寫法這樣確實解決了編譯丟失的情況，但會在編譯過程中報，最后到上找到最佳解決方案如下問題完美解決，也不報了。

一、起因

需求要求展示兩行，多余的文字用三個點替代，于是用了這幾個不太規(guī)范的屬性

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

后來發(fā)現(xiàn)代碼里寫的好好的，一到頁面上居然沒有反應(yīng)，和沒寫一個樣，f12看了下，原來是-webkit-box-orient: vertical;這個屬性丟失，導(dǎo)致了不生效，在Styles里把這個屬性加上就好了，于是斷定是編譯過程導(dǎo)致這個屬性丟失。

二、解決辦法

網(wǎng)上找了一個可行的解決方案，把a(bǔ)utoprefixer關(guān)掉，有一種寫法：

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

這樣確實解決了編譯丟失的情況，但會在編譯過程中報warning，最后到GitHub上找到最佳解決方案,如下

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

問題完美解決，也不報warning了。

GPU云服務(wù)器云服務(wù)器 mysql重啟后數(shù)據(jù)丟失 linux 重啟后磁盤丟失 css屬性 mongodb熱數(shù)據(jù)重啟后丟失

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114622.html

相關(guān)文章

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

摘要：某日閱讀世界，筆者的一段話鞭撻了我的靈魂。原文是這樣的說到這里，我就忍不住多說兩句。很多其實工作很多年的前端開發(fā)人員，也可能不知道的屬性值支持?jǐn)?shù)值，更不知道支持負(fù)值，這著實讓我很意外。只顯示文本的時候行高是。上集完敬請期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日閱讀《CSS世界》，筆者的一段話鞭撻...

tianlai 2019-08-30 15:55 評論0 收藏0
前端代碼評審 Checklist 清單

摘要：從而輔助整個團(tuán)隊提高代碼質(zhì)量統(tǒng)一代碼規(guī)范。如果你的團(tuán)隊還沒有這么一份代碼評審清單，也許這正是你需要的如果你的團(tuán)隊已經(jīng)有了代碼評審參照標(biāo)準(zhǔn)，這份清單也許能起到錦上添花的效果。如果違反這個規(guī)則，那么代碼會很難被測試或者重用。前言 ? 前端團(tuán)隊有評審代碼的要求，但由于每個開發(fā)人員的水平不同，技術(shù)關(guān)注點不同，所以對代碼評審的關(guān)注點不同，為了保證代碼質(zhì)量，團(tuán)隊代碼風(fēng)格統(tǒng)一，特此擬定...

xzavier 2019-08-23 18:33 評論0 收藏0
2019屆校招前端面試題整理——HTML、CSS篇

摘要：前言屆校招陸陸續(xù)續(xù)開始了，整理了一些高頻的面試題。標(biāo)簽提供給頁面的一些元信息名稱值對，有助于。開啟缺點一個是不支持，另一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。用于設(shè)置或檢索元素的縮放比例，值為即使用元素的實際尺寸。前言 2019屆校招陸陸續(xù)續(xù)開始了，整理了一些高頻的面試題。 HTML部分 1. 什么是？ DOCTYPE是html5標(biāo)準(zhǔn)網(wǎng)頁聲明，且必須聲明在HTML文檔...

Turbo 2019-08-29 16:21 評論0 收藏0
2019屆校招前端面試題整理——HTML、CSS篇

摘要：前言屆校招陸陸續(xù)續(xù)開始了，整理了一些高頻的面試題。標(biāo)簽提供給頁面的一些元信息名稱值對，有助于。開啟缺點一個是不支持，另一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。用于設(shè)置或檢索元素的縮放比例，值為即使用元素的實際尺寸。前言 2019屆校招陸陸續(xù)續(xù)開始了，整理了一些高頻的面試題。 HTML部分 1. 什么是？ DOCTYPE是html5標(biāo)準(zhǔn)網(wǎng)頁聲明，且必須聲明在HTML文檔...

Tamic 2019-08-02 11:13 評論0 收藏0
HTML 面試題總結(jié)

摘要：不區(qū)分大小寫的聲明是在中，聲明引用，因為基于。標(biāo)簽名必須用小寫字母。應(yīng)當(dāng)寫在中，以避免頁面元素由于樣式確實造成瞬間的白頁或者給用戶閃爍感。一旦遇到錯誤，立刻停止解析，并顯示錯誤信息。，，不支持，，，支持。 doctype(文檔類型) 的作用是什么？聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。有以下兩個值：怪異模式，瀏覽器使用自己的怪異模式解...

oujie 2019-08-02 10:14 評論0 收藏0
踩坑日記(持續(xù)更新...)

摘要：二按照官方的提示解決了意思就是切到分支，自己的分支解決沖突，提交。這是和二相反向的操作頁面標(biāo)題無效的解決辦法強(qiáng)類型轉(zhuǎn)換的坑條件用正則返回的布爾值結(jié)果返回了條件結(jié)果也返回了。 2018/3/2 1,vue的{{}}怎么失效了項目使用了twig模板渲染語法{{}}沖突，使用v-text v-html渲染可以寫表達(dá)式的寫法字符+變量 2，函數(shù)防抖節(jié)流封裝實用的下拉加載更多代碼demo...

taoszu 2019-08-22 15:00 評論0 收藏0