【筆記】SCSS 文字刪節號-webkit-box-orient: vertical;與 "autoprefixer: off"

在CSS裡，文字超過行數限制時會自動顯示"..."的刪節號，

SCSS語法如下

@mixin text-truncate() {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: $line-height-base;
   word-wrap: break-word;
   white-space: normal;

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

@for $i from 1 to 6 {   .text-truncate-#{$i} { @include text-truncate; max-height: #{$line-height-base * $i}em ; -webkit-box-orient: vertical; -webkit-line-clamp: $i; } }

轉譯CSS後，語法如下

.text-truncate-1 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; word-wrap: break-word; white-space: normal; /*! autoprefixer: off */ box-orient: vertical; /* autoprefixer: on */ max-height: 1.5em; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.text-truncate-2 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; word-wrap: break-word; white-space: normal; /*! autoprefixer: off */ box-orient: vertical; /* autoprefixer: on */ max-height: 3em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.text-truncate-3 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; word-wrap: break-word; white-space: normal; /*! autoprefixer: off */ box-orient: vertical; /* autoprefixer: on */ max-height: 4.5em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.text-truncate-4 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; word-wrap: break-word; white-space: normal; /*! autoprefixer: off */ box-orient: vertical; /* autoprefixer: on */ max-height: 6em; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.text-truncate-5 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; word-wrap: break-word; white-space: normal; /*! autoprefixer: off */ box-orient: vertical; /* autoprefixer: on */ max-height: 7.5em; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }

這里特別解釋一下這一段，box-orient: vertical;在轉譯的時候，會被刪除，也許是因為不是正規認可的語法，但是如果少了這個宣告，在文字被截斷的後方，則不會出現 『...』。為了讓 box-orient: vertical; 無論如何都要出現，便加入autoprefixer: off
寫法如下，前綴早在Live Sass Compiler做過設定，但實驗後發現這段不會自動產生前綴樣式，所以自己加上

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

如果使用 autoprefixer: off  這個語法，Live Sass Compiler 產出時 ，控制台會出現警告文字訊息，每次存檔會跑出6段，如下所示，非常讓人觸目驚心。

Autoprefix Error
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
--------------------
Autoprefix Error
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
--------------------
Autoprefix Error
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
--------------------
Autoprefix Error
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
--------------------
Autoprefix Error
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
--------------------
Autoprefix Error
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
--------------------

另有一個寫法是，/*! autoprefixer: ignore next */

我的翻譯為：將 autoprefixer 會『自動刪除老語法、無用語法、老舊兼容代码』這件事， 在下一行停止執行


實驗結果

只要使用/*! autoprefixer: ignore next */，控制台就不會出現警告文字訊息


實驗一

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

轉譯後只剩下，但這個語法在瀏覽器上不會出現刪節號『...』

   box-orient: vertical;

實驗二

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

轉譯後為空值，也就是無法被編譯



實驗三

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

轉譯後也沒有自動產生前綴

   box-orient: vertical;