2 行以降のテキストを非表示にして、「...123 T.」のようなオーバーフロー インジケーターを表示するにはどうすればよいですか?

2 行目のオーバーフロー インジケーターを使用してドットの後のテキストを非表示にする

限られたスペースでテキストを表示する場合、多くの場合、切り詰めてオーバーフローを示す必要があります。この質問は、2 行を超えるテキストを非表示にし、「...123 T」を追加するという課題に取り組みます。

現在の実装

提供されたコードは、最初にこの問題に取り組みます:

<div class="container">
  <span class="main-text">
    Long text that exceeds two lines.
  </span>
  <span class="small-text">123 T.</span>
</div>

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

while thisこのメソッドは 2 行以内の余分なテキストを非表示にしますが、ブラウザー間互換性がないため、希望の条件を完全には満たさない可能性があります。

今後の解決策

仕様では、このタスクを 1 行で簡素化できる短縮プロパティ line-clamp を提案しています。

line-clamp: 2 "...123 T.";

このプロパティにより、オーバーフローを伴う視覚的に切り詰められたテキストの作成が可能になります

ハックな代替手段

line-clamp プロパティが広くサポートされるまでは、CSS ハックを使用して回避策を達成できます:

.main-text {
  line-height: 1.2em;
  max-height: calc(2 * 1.2em);
  overflow: hidden;
  position: relative;
}

<div class="main-text">
  Lorem ipsum ...<span>123 T.</span>
</div>

このアプローチでは、隠されたドットと「123 T」を含むスパン要素です。テキストはコンテナの右下に配置されます。大きなボックスシャドウを使用してドットが見えなくなり、省略記号のみが表示されます。

以上が2 行以降のテキストを非表示にして、「...123 T.」のようなオーバーフロー インジケーターを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。