PCではテキストを1行目で三点リーダーを表示して、SPでは2行目で表示する方法

今回の背景

要件によってはPCでテキストを一行だけで改行せずに三点リーダーを表示し、SPでは二行目以降で改行せずに三点リーダーを表示することがあります。自身が少し時間をかけてしまったので、アウトプットで投稿しようと思いました。

前回の投稿で

一行で簡単に三点リーダーを表示する記事を投稿しました。
https://qiita.com/naofunky/items/53121855c1d6c376c687

前回と異なるポイント

SPのレスポンシブの時の記述に追加するプロパティと書き換えるものがあります。

index.html

//基本html構造
<div class="mod" style="width: 300px">
        <p class="text">
          ああああああああああああああああああああああああああああああああああああああああああああああああああ
        </p>
      </div>

こちらが二行で三点リーダーを表示するCSSになります。

style.css

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

前回の一行で三点リーダー表示は下記のようなCSSになります。

style.css

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

複数行で三点リーダーにしたい場合は上記のようにします。今回のようにPCでは一行でSPでは2行のようにしたい場合、下記のようにします。

style.scss

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

@media (max-width: 600px) {
  .text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: auto;
  }
}

変更点はwhite-space:nowrap;からwhite-space:auto;に変更するだけです。
是非、参考にしてください。

参考サイト