2019年12月6日 星期五

【筆記】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; } }