1. 程式人生 > >vue專案中關於CSS樣式【-webkit-box-orient: vertical】打包後丟失問題

vue專案中關於CSS樣式【-webkit-box-orient: vertical】打包後丟失問題

        最近在做vue專案的時候頁面處理多行文字樣式時用到了-webkit-box-orient: vertical這個屬性,本地跑專案沒問題,但是打包放到伺服器後發現這個屬性丟失了。如下圖:


.topic-info {
        margin: 5px 10px;
        font-size: .8em;
        text-indent: 2em;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

        後來在網上查詢一番,發現可能是optimize-css-assets-webpack-plugin這個外掛的問題,其實解決辦法很簡單,只需要在這個屬性前後加一個特殊註釋即可,如下圖:

.topic-info {
        margin: 5px 10px;
        font-size: .8em;
        text-indent: 2em;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        overflow: hidden;
        text-overflow: ellipsis;
      }
參考連結:https://segmentfault.com/q/1010000009360389

相關推薦

vue專案關於CSS樣式-webkit-box-orient: vertical打包丟失問題

        最近在做vue專案的時候頁面處理多行文字樣式時用到了-webkit-box-orient: vertical這個屬性,本地跑專案沒問題,但是打包放到伺服器後發現這個屬性丟失了。如下圖:.topic-info { margin: 5px 10px

vue腳手架搭建的專案後期上線-webkit-box-orient: vertical不顯示的問題

目前這個問題我也是第一次碰到,也只是在vue打包專案上線的時候遇到的,其它地方暫時沒有實踐。 做頁面效果的時候,我們經常會遇到文字溢位用“...”代替的情況,下面這種樣式是我的程式碼(可能和你們的大同小異):這裡是最多顯示兩行,第二行溢位隱藏用“...”代替 這樣寫完之後在本地測試是完全OK的,但是npm

vue專案引用樣式檔案出現: This dependency was not found:

vue專案中引用樣式檔案出現:This dependency was not found:* common/stylus/index.styl in ./src/main.jsTo install it, you can run: npm install --save com

vue webkit-box-orient: vertical打包線上不顯示

本地 tcs ref prefix pac 行數 iss vertica 科學 emmm……覺得不科學啊,寫了幾個vue的網站,限制超出行數省略號。結果發現放到線上,全都瓦特了。反復檢查本地跑起來沒錯,代碼沒少,偏偏在線上的時候就是缺了vue -

解決webpack不能編譯scss文件的-webkit-box-orient:vertical問題

webp clas top lam 文件中 dde isp ext prefix 最近項目遇到一個問題:   處理多行文本溢出的樣式,但是在webpack編譯之後,-webkit-box-orient:vertical 這個樣式丟失了 overflow: hidden;

vue-cli 打包編譯 -webkit-box-orient: vertical 被刪除解決辦法

前言 github有人就此問題提問了, 也有了解決辦法, https://github.com/cssnano/cssnano/issues/357, 具體怎麼做,我這裡做一下記錄 正文 原因: -webkit-box-orient: vertical  這個屬性被 optimize-css

VUE -webkit-box-orient: vertical打包放到線上不顯示

先說明問題是什麼,出現的狀況是 -webkit-box-orient: vertical 這個屬性在本地執行是存在的,但是打包後放到線上這個屬性消失了;問題出現原因:打包時這個屬性和註釋混在了一起(個人猜測)解決辦法:1.直接在行內加 -webkit-box-orient:

webpck不能編譯這個屬性-webkit-box-orient: vertical (解決辦法)

TE soft git box less sans mic app ESS sass:/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */less:/*! autoprefixe

[ -webkit-box-orient: vertical ] 打包丟失問題

多行文本 刪除註釋 web 註釋 解決 set 文件 .config pack vue項目中,多行文本樣式顯示省略號,用到了-webkit-box-orient: vertical這個屬性,本地正常,打包線上後,該屬性丟失。webpack打包時把這個樣式過濾掉了。 網上解決

webpack 打包編譯-webkit-box-orient: vertical 消失

webpack 打包編譯-webkit-box-orient: vertical 後消失 /* autoprefixer: off */ -webkit-box-orient: vertical; // 參考 https://github.com/postcss/a

webpack編譯-webkit-box-orient: vertical 消失問題解決方案

手上的專案恰好碰到這個問題 試了很多方法 最後網上找到了解決方案 解決方案: /* autoprefixer: off */ -webkit-box-orient: vertical; /* aut

webpck不能編譯這個多行文字溢位屬性-webkit-box-orient: vertical,自動隱藏

optimize-css-assets-webpack-plugin這個外掛的問題 註釋掉webpack.prod.conf.js中下面的程式碼 new OptimizeCSSPlugin({ cssProcessorOptions: config.

-webkit-box-orient: vertical; 不顯示

webpack 打包編譯-webkit-box-orient: vertical 後消失 解決方案: 加註釋,不讓去掉 /* autoprefixer: off */ -webkit-box-orient: vertical; // 參考 https://github.com/postcss

-webkit-box-orient: vertical打包build丟失問題

方法一: /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ 方法二: 需把webpack.

-webkit-box-orient: vertical; 在webpack上失效

-o text pack splay pan efi top color style -webkit-box-orient: vertical;在webpack上失效,可以使用以下方式解決 .ifc-header-content-comment {

vue 專案使用 -webkit-box-orient 屬性

問題描述:在 vue 專案 less/scss/css 中使用 -webkit-box-orient: vertical; 屬性, 專案打包編譯以後 -webkit-box-orient: vertical; 後消失。 產生原因:autoprefixer 自動移除老式過時的程式碼。 解決方案

Vue專案使用Sass變數自定義ag-grid表格主題樣式

1、在Vue專案中新建一個樣式檔案  src/assets/styles/table.scss ,引入ag-grid預設的樣式檔案 table.scss $ag-icons-path: "../../../node_modules/ag-grid-community/

Vue的坑vue專案動態繫結src不顯示圖片解決方法

  v-for繫結src的資料如下: data() { return { img_src:"../../assets/images/mirror-service.png" } }   渲染之後,發現圖片不顯示,上網查詢之後發現是應為

vue專案,元件裡單獨引入對應css

我的css檔案,放在src資料夾下的assets資料夾下css內。 根據你具體的檔案路徑配置,引入在當前頁面路徑下的css (不是在main.js裡引入,main.js引入是公共css與js,之前文章有在main.js引入步驟)

webpack不顯示-webkit-box-orient這個css屬性

今天在寫vue專案時發現webpack打包時不會解析 -webkit-box-orient 這個屬性,解決方法如下。 /*! autoprefixer: off */ -webkit-box