CSSのラインクランププロパティとは何ですか?使い方？

この記事の内容は、CSSのline-clamp属性とは何なのかを紹介することです。使い方？困っている友人は参考にしていただければ幸いです。

まず第一に、line-clamp 属性とは何なのかを理解しましょう。

line-clamp 属性は、ブロック要素に表示されるテキストの行数を制限できます。この効果を実現するには、他の WebKit 属性と組み合わせて - を追加する必要があります。 WebKit- プレフィックス。

line-clamp 属性はサポートされていない WebKit プロパティであり、CSS 仕様のドラフトには記載されておらず、編集中のドラフトです。これは、ラインクランプのプロパティが進行中の作業であるため、確定したものではないことを意味します。 line-clamp属性の定義はmax-linesとblock-overflowに分かれるが、前者は破棄される危険性がある。 [推奨されるビデオ学習: css3 チュートリアル ]

line-clamp (切り詰められる前の行数の設定) の機能が無効になっているため、max-lines がどのように無効になっているかを簡単に確認できます。が実装され、さらなる切り捨てが不要になります。話が脱線してしまうので先に進みましょう。

次に、line-clamp 属性がどのように使用されるかを見てみましょう。

基本構文

.module {
  line-clamp: [none | <integer>];
}

line-clamp 現在の仕様草案では次の値が受け入れられます:

none: 最大値は設定されていません。行数に応じて設定されるため、切り捨ては発生しません。

: コンテンツを切り捨てるまでの最大行数を設定し、最後の行の末尾に省略記号 (...) を表示します。

省略記号は Unicode 文字 (U 2026) としてレンダリングされる必要がありますが、使用されるユーザー エージェントのコンテンツ言語と書き込みモードに基づいて同等の文字に置き換えることができます。

では、text-overflow 属性 (テキスト オーバーフロー) を使用してテキストをインターセプトできないのではないかと疑問に思う人もいるかもしれません。

text-overflow には、テキストを切り捨てる値 (省略記号) があります。効果を見てみましょう

css コード:

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

text-overflow はテキストをインターセプトできることがわかりますが、テキストの 3 行目などのどこかでテキストをインターセプトしたい場合はどうすればよいでしょうか。

ここでラインクランプが活躍します。

line-clamp 属性の互換性を見てみましょう

サポートされているブラウザでは、JavaScript を使用して効果を実現できます。

JavaScript コード、Clamp.js のダウンロード アドレス: https://github.com/josephschmitt/Clamp.js

概要: この記事はここまでです記事の内容全体が皆さんの学習に役立つことを願っています。

以上がCSSのラインクランププロパティとは何ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。