CSSでシンプルに省略表示を実現する方法 – 1行/複数行対応のテクニック

はじめに Webページを作るとき、長いテキストを整えて表示することってよくありますよね。例えば、タイトルや説明文が決められたスペースからはみ出してしまうと、デザインが崩れてしまうことも。そんなときに役立つのが、CSSで簡単にできる「省略表示」です。指定した行数を超えたテキストを自動的に「...」で省略できるので、コンテンツがすっきりして、読みやすさもアップします。 この記事では、1行だけの省略表示から複数行の省略まで、現代のブラウザに対応したシンプルな方法をご紹介します。CSSの省略表示テクニックを押さえて、コードの見た目もスッキリ整えてみましょう！ 1行の省略表示 CSSでテキストが1行の時に省略表示をするのはtext-overflow: ellipsisプロパティを使用し、シンプルに実装できます。 コード例 .ellipsis-one-line { overflow: hidden;