CSS の text-overflow 属性とテキストの切り捨てに関するサンプル コードの共有

この記事では主に、CSS の text-overflow 属性とテキストの切り捨てに関する関連情報を紹介します。この記事の内容が参考と学習に役立つことを願っています。開発者の方は、ヘルプが必要な場合は、エディタに従って学習してください。

はじめに

この記事では、CSS の text-overflow 属性とテキストの切り捨てに関連する内容を主に紹介します。詳細な紹介を見てみましょう。

テキスト オーバーフローとテキストの切り捨て

CSS 担当者はテキスト オーバーフローに精通している必要があり、テキスト 1 行の切り捨てについては、テキスト オーバーフローを含む次の 3 行のコードが最も一般的です。私たちが使用しています。

text-overflow: ellipsis;  
overflow: hidden;  
white-space: nowrap;

結局のところ、text-overflow: ellipsis; は元々 IE 専用だったので、テキストの切り捨てに関する初期の苦労は Firefox7 まででした。 FF の必要性を脇に置いた 0 の秘訣は、集中しながらこのコードを使用することです。もちろん、複数行の切り捨てはまだ問題外です。ブラウザ間の互換性要件が高い状況では、かつてはフロントエンドがコンテンツの切り捨てを支援するためにバックエンドを必要としていました。

複数行のテキストの切り捨てを実現する他の方法もありますが、現時点ではブラウザーのフォームですべてを処理することは不可能です。たとえば、疑似要素 :after を使用して複数行の末尾を配置し、グラデーション トランジションを適用して切り捨てをシミュレートできるようになりました。

.clamp{
  height: 3 .6em;
  line-height: 1.2em;
  overflow: hidden;
  position: relative;
}
.clamp:after{
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

グラデーションを使用すると切り捨ての硬さが軽減されますが、実際の状況で使用したことはありません:)。この方法には多くの欠点があり、この方法を使用して非常に醜く見えることは決して好きではありません。方法。緊急の用事がない限り、私はいつも他の人に「できません」と真剣に言います~

Webkit だけなら、通常のアプローチは -webkit-line-clamp です。 webkit クライアントは依然としてより良い方法であり、その効果はまさに私たちが期待していたものです:

display: -webkit-box;  
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

何年も経っても (>5)、このコードはまだうまく機能しますが、今振り返ってみると、-webkit- Box は古い flex 構文。現在は新しい flex 構文と共存していますが、いつか消えるかもしれません。しかしそれでも、これより良い方法はなく、-webkit-line-clamp に代わる属性はなく、新旧の構文を混合することはできないため、「クラシック」コードを使用し続ける必要があります。

-webkit-line-clamp には別の小さな問題があります。それは、中国語のサポートに欠陥があるということです。英語の完璧なエフェクトに比べて、中国語の場合はコンテナの幅が変化するため、「…」の3点が切り取られ、2点、あるいは1点しか表示されなくなりがちですが、閲覧していただけると幸いです。アップデートされたバージョンでは、この小さな問題を解決できます。

テキストが切り詰められる場合、デフォルトでは常に 3 つのドットで表現されます。実際、上記の疑似要素のシミュレーション方法を除いて、この表現を変更することはできません。しかし、text-overflow 属性を振り返ってみると、標準の新しいバージョンはさらに多くの可能性をもたらします。

CSS 基本ユーザー インターフェイス モジュール レベル 3 は現在 CR ステータスにあり、選択できる値はクリップまたは省略記号の 2 つだけですが、ドラフトのレベル 4 では属性値がさらに増えています。

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

切り詰められても変化しない 3 つの点を置き換える テキストを指定でき、トランジションを指定してその距離を制御でき、さらに開始と終了を制御する 2 つの値を提供することもできます。これは役に立たないように思えますが、Firefox は実際には 9.0 の時点で 値と double-value 構文をサポートしていました。もしかしたら、Firefox はテキスト オーバーフローで批判された後、やり方を変えて最新の落とし穴に移行したのではないでしょうか...

しかし、テキスト オーバーフローは依然として同じテキスト オーバーフローであり、依然として 1 行です。 、古いパートナーの空白: nowrap; で引き続き動作し、使い慣れたものと同じです。もっとファッショナブルな機能がいくつかあるとしても、複数行を切り詰める手段が不足していることは依然として隠せません。

概要

以上がCSS の text-overflow 属性とテキストの切り捨てに関するサンプル コードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。