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 の秘訣は、集中しながらこのコードを使用することです。もちろん、複数行の切り捨てはまだ問題外です。ブラウザ間の互換性要件が高い状況では、かつてはフロントエンドがコンテンツの切り捨てを支援するためにバックエンドを必要としていました。

.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);
}

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

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

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

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

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

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