「さらに表示」ボタンによる複数行テキストの切り捨てに関する考察

最近、たまたまこの小さな要件に遭遇しました。昔、JS を使用してこれを処理したことを覚えていますが、結局のところ、当時の私は若く無知でした。 切り替え操作は Checked 疑似クラスを使用して実装できます。これは少し安価です。重要なポイントは次のとおりです。

1. 複数行のテキストは切り捨てられ、省略記号が表示されます
2. 「もっと見る」ボタンはすべてのテキストを展開します
3. テキストを展開すると、ボタンのテキストは「テキストを折りたたむ」になります。
4. テキストが切り捨てられたときにボタンが表示されます (テキストが 1 行しかない場合は、表示する必要はありません :sweat:)

質問: テキストオーバーフロー: 省略記号は複数行の切り捨てをサポートしていません。 CSSでボタンのテキストを切り替えるには？ボタンが表示される条件を決めるには？以下で一つずつ説明します。

複数行テキストの切り捨て

既存の HTML 構造が次のようになっていると仮定します。

<div class="box">
  <p>テキストコンテンツ</p>
</div>

1 行を切り捨てる必要がある場合の一般的な方法は次のとおりです。

ｐ {
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
  空白: ラップなし;
}

効果は以下のとおりです。

複数行のテキストでは、切り捨てられるテキストの行数を定義するために line-clamp が必要です。

ｐ {
  ディスプレイ: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: 垂直;
  オーバーフロー: 非表示;
}

効果は以下のとおりです。

ボタンをクリックするとすべてのテキストが表示されます

HTML 構造は次のように変換されます。

<div class="box">
  <input type="checkbox" name="toggle" id="toggle" style="display: none;">
  <p>テキストコンテンツ</p>
  <label for="toggle">もっと見る</label>
</div>

ボタンのクリック動作を監視するには、この記事の冒頭で説明した Checked 疑似クラスを使用します。

入力[name="toggle"]:チェック済み{
 & + p {
   -webkit-line-clamp: 設定なし;
 }
}

このように、ユーザーがクリック（選択）すると、すべてのテキストが表示され、選択されていない場合はテキストが非表示になります。

動的ボタンテキスト

論理的に言えば、すべてのテキストが表示された後、ボタンのテキストは「Collapse Text」に切り替わる必要があります。CSS でテキストを変更するにはどうすればよいでしょうか? 実際には、content 疑似要素を使用するだけです。

HTML からテキストを削除し、CSS コントロールに置き換えます。

<label for="toggle"></label>

ラベル {
  ＆：：後 {
    コンテンツ: "もっと見る";
  }
}

同様に、次のようになります。

入力[name="toggle"]:チェック済み{
  & ~ ラベル {
    ＆：：後 {
      コンテンツ: "テキストを折りたたむ";
    }
  }
}

効果は以下のとおりです。

ボタンのスタイルが醜い場合は、自分で調整してください:汗:

ボタンが表示される条件

テキストが 3 行未満の場合、ボタンは不要なので表示されません。

大きな問題があります。インターネットをサーフィンした後、テキストが切り捨てられているかどうかを判断する疑似クラスがないことがわかりました。もしあれば、次のようにすることができます。

ｐ {
 &:切り捨て{
   & + ラベル {
    表示: ブロック;
   }
 }   
}
ラベル {
  表示: なし;
}

切り捨ては切り捨てを意味します。

しかし、それでも、すべてのテキストを表示するとテキストが切り捨てられず、ボタンが消えてしまうため、目的を達成することはできません。

上記は JS で実現したシミュレーション効果です。ソースコードは次のとおりです。

リストを document.querySelectorAll("p");
オブザーバーを新しいResizeObserver(entries => {
  エントリ.forEach(item => {
    item.target.classList[item.target.scrollHeight > item.contentRect.height ? "add" : "remove"]("切り捨て");
  });
});

リスト.forEach(p => {
  オブザーバー.observe(p);
});

原則としては、テキスト要素のサイズ変更を監視し、切り捨てられたクラス名を動的に追加します: joy:

したがって、CSS 内の切り捨てられた疑似クラスは、切り捨てられたクラス:sweat: に変更する必要があります。

ｐ {
 &.切り捨て{
   & + ラベル {
    表示: ブロック;
   }
 }   
}

テキストが切り捨てられていないときにボタンが表示されないのではなく、切り替え時にボタンが常に表示されるようにしたいと考えています。したがって、テキスト要素のサイズ変更を常に監視する必要はありません。必要なのは初期値 (初期化時にテキストが切り捨てられるかどうか) だけです。つまり、監視するのは 1 回だけです。

エントリ.forEach(item => {
  //... 元のコード observer.unobserve(item.target); // モニターを削除します });

または、この API をまったく使用する必要はなく、ページが初期化されたときに 1 回だけ走査して判断するだけです。

リストを document.querySelectorAll("p");

リスト.forEach(項目 => {
  item.classList[item.scrollHeight > item.offsetHeight ? "add" : "remove"]("切り捨て");
});

このようにすると、ページが初期化されるときに、切り捨てられたクラス名を持つ P 要素が自動的に追加され、ボタンを常に表示できるようになります。

拡張機能

たとえば、ボタンのスタイルをカスタマイズしたり、下部に透明なグラデーション マスクを追加したり、切り替え時にトランジション効果を追加したりできます。

要約する

チェックされた疑似クラスは、JS を記述せずに多くのニーズを満たすことができるため、クラスの切り替えに関連するあらゆる操作に使用することを検討できます。

上記は、「詳細を表示」ボタンを使用した複数行テキストの切り捨てについてお伝えしたい内容です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!