2017.5.27
2017.6.19

ビルド時に「-webkit-box-orient:vertical」が削除されてしまう場合の対応

Visual Studio Tools for Apache CordovaでIonic2用のテンプレートを使ってプロジェクトを作成し、表示領域からオーバーした文字列を「...」で表示する方法で書いたような複数行の末尾を「...」で表示するCSSを設定しても、実際に表示された画面では設定した内容が反映されていませんでした。

ブラウザのシミュレーションに表示された画面を開発者ツールで確認すると、CSSで設定したはずの「-webkit-box-orient: vertical」がなぜか削除されています。

これはどうやら、ビルド時にベンダープレフィックス自動付与(autoprefixer)の機能によって削除されてしまっているようなので、以下はこの時の対処方法です。

コード

対処方法自体は簡単で、「-webkit-box-orient: vertical;」を以下のようなコメントで囲えばOKです。


.message{
    border:1px solid #aae;
    width:110px;
    overflow: hidden;
    display: -webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 3;
}

上記のコメントで囲んだ行はautoprefixerの対象外となります。

別の対応方法としては、HTMLに直接「style」で埋め込むといった方法もあるようです。

参考リンク

Ionic】関連記事