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

G9YH 發布于2019-08-30 10:52 / 2482人閱讀

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

一、起因

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

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了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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