CSS省略記号スタイル(小知識)

879 ワード

1行省略記号:

.ellipsis{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
}

複数行省略記号:

.ellipsis_paragraph{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}

注目すべきは、webpackパッケージ時に-webkit-box-orient: vertical;という行が削除されたことです!!
このような状況が発生したのは、autoprefixerが古いコードを削除するためです.
注釈を追加してautoprefixerを閉じ、注釈行をコンパイル時に削除できないようにすることができます.
具体的なコードは以下の通りです.

.ellipsis_paragraph{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}

Ubuntu 16.04で英語キーボードを使えるようにする方法

cssビジュアル--三角形