エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CSSでシンプルに省略表示を実現する方法 – 1行/複数行対応のテクニック
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSでシンプルに省略表示を実現する方法 – 1行/複数行対応のテクニック
はじめに Webページを作るとき、長いテキストを整えて表示することってよくありますよね。例えば、タイ... はじめに Webページを作るとき、長いテキストを整えて表示することってよくありますよね。例えば、タイトルや説明文が決められたスペースからはみ出してしまうと、デザインが崩れてしまうことも。そんなときに役立つのが、CSSで簡単にできる「省略表示」です。指定した行数を超えたテキストを自動的に「...」で省略できるので、コンテンツがすっきりして、読みやすさもアップします。 この記事では、1行だけの省略表示から複数行の省略まで、現代のブラウザに対応したシンプルな方法をご紹介します。CSSの省略表示テクニックを押さえて、コードの見た目もスッキリ整えてみましょう! 1行の省略表示 CSSでテキストが1行の時に省略表示をするのはtext-overflow: ellipsisプロパティを使用し、シンプルに実装できます。 コード例 .ellipsis-one-line { overflow: hidden;

