2023.11.16レシピテキストテキストを改行しないで末尾に「...」を付けて省略表示するCSSのtext-overflowプロパティを使い、テキストが親要素の幅より広いときに自動的に省略形にする方法を解説します。この記事のポイントtext-overflowプロパティを使うとCSSのみでテキストを自動省略できるテキストを親要素の幅に納めるにoverflowプロパティとwhite-spaceプロパティも併せて指定する必要がある2023年11月時点では末尾の記号は「...」以外を指定することはできない(仕様では他の記号も指定できる)テキストを改行せずに末尾を省略して表示する前後の要素と高さを揃えたいときや表示エリアが限られているとき、CSSのtext-overflowプロパティを使う以下のようにテキストを自動的に省略して1行に収めることができます。こちらのサンプルでは、記事一覧の記事タイトルであるh2要素に対してtext-overflowプロパティを指定し、親要素の幅より広い場合にテキストを自動的に省略する指定をしています。text-overflowプロパティ単体では効かないため、overflowプロパティとwhite-spaceプロパティも併せて指定する必要があります。1.6;}上記サンプルのCSSとHTMLの全体のコードは下記の内容になります。CSSは外部ファイルとしてHTMLが読み込む前提で分けて記述します。<h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。<h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。<h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。<h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。<h2>こちらは表示確認用のテキストです。こちらは表示確認用のテキストです。</article></section>仕様上はtext-overflowプロパティは省略記号を「...」以外の文字も指定できたり、フェードアウト(fade)が指定できるようになっていますが、2023年11月時点ではブラウザが対応していないため他の記号は指定しても表示されません。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。