vue專案打包後多行省略樣式混亂

2021-09-24 07:06:33 字數 664 閱讀 9971

在實現多行省略時,可以用以下方式來實現:

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

複製**

vue專案中採用這種寫法後,在本地並沒有問題。但是在打包之後發現樣式混亂,沒有正常顯示省略號。從chrome的偵錯程式中發現是-webkit-box-orient: vertical缺失,從而導致的。

解決辦法是通過在-webkit-box-orient: vertical前後加入特定注釋:

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: @num;

/*! autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

複製**

這樣多行省略就能正常顯示了。

vue專案,本地執行和build打包後樣式不同

最近在打包專案上傳到伺服器時,總是會出現奇奇怪怪的樣式,譬如 我本地用el menu做的二級選單分類,在本地可以正常顯示,打包上傳至伺服器出現異常,如下圖 本地正常顯示 打包後異常顯示 解決方案 檢視通過控制台檢視本地渲染後的樣式和伺服器渲染後的樣式,發現之前其他檔案中的el menu的樣式是全域性...

vue專案打包後動態配置樣式(切換主題)

有時候專案需要多套主題,根據不同節日來切換不同的節日,網上有很多方法可以實現。這裡介紹vue打包後動態配置樣式。在這個基礎上對配置檔案進行修改 首先現在public中建立乙個config.css樣式配置檔案,然後再index.html引入,內容 標題樣式配置 configtitleclass 全域性...

vue專案打包後跨域

關於vue的跨域配置,有開發環境的跨域和生產環境的跨域,詳見我的另一篇部落格 對於上篇文章的生產環境的跨域位址配置,是將所有介面的訪問都指向同乙個伺服器,而對於前後端未完全分離的專案,如果有某個介面需要訪問非當前專案的另一台伺服器的話,就需要對這個介面單獨進行處理了,針對這個問題,我重新梳理了一下關...