テキストオーバーフロー：省略記号は有害であると見なされます

プラトン再発行

フォロワー： 0

この手法には、いくつかの正当な使用例があります。たとえば、タイトルと説明を含むテーブルがあるとします。タイトル用のスペースを増やすために、小さなビューポートの説明をXNUMX行に制限し、このアイテムの詳細ページで説明を繰り返します。

ただし、ボタンやフォームラベルなどのアイテムで、見栄えを良くするために（？）、または垂直に配置するときによく使用されます。ただし、ビューポートを変更するか、テキストのサイズを変更すると、テキストの終わりが消えます。

「…特定の状況で使用された場合」はそこに属すると思いますが、それがなくても確かにブログ投稿のタイトルが良くなります。エリックが言うように、テキストを切り捨てるための正当なユースケースがあります。たぶんほんの少しですが、それでも合法です。

最終的な目標は、データの「損失」を防ぐことです。それは確かにCSSで起こり得る。コンテナが誤ってオーバーフローしたテキストは、単にそこにないという意味で失われます。そして、そのテキストが単にそこにない場合、たとえそれがWebに公開された中で最高かつ最も巧妙に作成された行動の呼びかけであったとしても、ユーザーはそれを見逃すでしょう。

エリックは、テキストを切り捨てる方法はないと指摘します text-overflow: ellipsis 見える。それがなくなったら、それはなくなった（スクリーンリーダーはそれを発表しているようですが）。それは事実上失われたデータです。あなたはそれで大丈夫かもしれません。何が起こっているのか、そしてそれが意図されているのかを知っている限り、それはクールです。

しかし、これが私がこれを共有したいと思ったエリックの言うことです：

デザインに合わせてコンテンツを制限するのではなく、CSSを柔軟にして、長い単語を適切に処理できるようにします。

繰り返しますが、あなたは かもしれない コンテンツをデザインに適合させたい。しかし、私はおそらく、エリックのように、デザインはコンテンツに適応する必要があります逆ではなく。ページ上のテキストが重要でない、または目的がない状況を思い出すのに苦労しています。CSSプロパティによって決定された任意のポイントで切り落とすとかっこいいでしょう。ブログ投稿のアーカイブで、各投稿に切り捨て前の投稿コンテンツの抜粋が表示されている可能性がありますが、これは正確には次のユースケースではありません。 text-overflow: ellipse.

CSSには、さまざまな長さのテキストを考慮した柔軟なデザインを作成するためのツールがあります。だから多分防御的なCSSを書く…問題を予測し、さまざまなコンテンツシナリオを適切に処理する方法を知っているCSS。 text-overflow: ellipsis そのためのCSSアーセナルの一部である可能性があります。しかし、それはまた、お風呂の水で赤ちゃんを捨てているかもしれません。そのデータを失うことは、ヘアカットを与える前に、そのコンテンツが行うことになっていることのコストに見合うかどうかを尋ねる価値があります。

テキストの切り捨てについて話している間…

リンク 10月1、2021上