CSSテキストのはみ出し：三点リーダー、行数制限、単語の改行
CSSのはみ出しとテキスト省略の実験室
CSSテキストのはみ出し：三点リーダー、行数制限、単語の改行 | We.Inc
長いURLとドイツ語の複合語が入ったボックスのサイズを変えながら、はみ出しの処理、三点リーダーによる省略、行数制限、単語の改行、ハイフネーションをTailwindのクラスと合わせてライブで試せます。
ボックスが小さすぎると、長いコンテンツは枠からはみ出します。はみ出した部分をどう扱うかは overflow プロパティで決まり、値は表示、非表示、切り取り、常にスクロール、自動の5種類です。1行で末尾を「…」にするには、折り返しの禁止、はみ出しの非表示、三点リーダーの3つの指定を組み合わせます。複数行の場合は行数制限のプロパティを使います。改行できない長い単語を分割するには、任意の位置での折り返しを許可する指定を使います。
問題に合わせてレシピを選ぶ
- 1行で、末尾を三点リーダーで省略
- white-space: nowrap; overflow: hidden; text-overflow: ellipsis
- 3行まで表示し、その後を三点リーダーで省略
- display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden
- 長いURLでレイアウトが崩れる
- overflow-wrap: anywhere
- wrap-anywhere (v4.1) または break-words
- ボックスに専用のスクロールバーが必要
- overflow: auto
幅のスライダーをドラッグすると、実際のWebアドレス、Donaudampfschifffahrtsgesellschaft という単語、普通の文章を囲むサンプルのボックスが縮みます。はみ出し、折り返し、行数制限のすべてのオプションがボタンになっていて、結果はすぐに反映され、必要なCSSはその下にそのまま書き出されます。
- 読み込むサンプルテキストを選びます。URL、長い複合語、段落のいずれかです。
- テキストが収まらなくなるまで幅のスライダーをドラッグします。
- はみ出しの値、三点リーダー、行数制限、単語の改行オプションを1つずつ試します。
- 気に入った結果に対応するCSSをコピーします。
- 三点リーダーには、折り返しの禁止、表示以外のはみ出し設定、幅の制限の3つがすべて必要です。どれか1つでも欠けると「…」は表示されません。
- フレックスの行の中では、省略したい子要素に min-width: 0 も必要です。フレックスアイテムは既定ではコンテンツより小さく縮まないためです。
- テキスト全体を title 属性に入れるか、フォーカス時に表示しましょう。省略された単語は、ホバーできない人には見えないからです。
- 自動ハイフネーションは、要素またはその親に、ブラウザーが辞書を持っている言語の lang 属性がある場合にだけ機能します。
よくある質問
三点リーダーによる省略が効かないのはなぜですか？
たいていは、組み合わせるべき指定のどれかが抜けています。要素はブロックレベルまたはインラインブロックで幅が制限されていること、はみ出しの設定が非表示か切り取りであること、そして折り返しを禁止してテキストが1行に収まっていることが必要です。フレックスやグリッドのアイテムの場合は、縮小を許可するために最小幅0の指定も追加してください。
行数制限はベンダープレフィックスなしでも使えますか？
プレフィックス付きの書き方、つまり -webkit-line-clamp を -webkit-box の表示指定と縦方向の指定と組み合わせる方法は、現行の主要ブラウザーすべてで動作し、Tailwind が出力するのもこの形です。CSS Overflow Level 4 で定義されたプレフィックスなしのプロパティはまだ対応が広がっている途中なので、それだけに頼る前に caniuse で対応状況を確認してください。
単語の改行に関する2つのプロパティの違いは何ですか？
overflow-wrap は、そのままでははみ出してしまう場合にだけ単語の途中で改行するので、普通の単語は通常どおり折り返されます。一方、word-break で全文字の間での改行を許可すると、ブラウザーはどこでも任意の2文字の間で改行できるようになり、行末がガタガタで読みにくいテキストになります。単語内での改行を禁止する指定は、中国語、日本語、韓国語のテキストで単語の途中での改行を避けたい場合に使います。
切り取り（clip）には非表示（hidden）にない機能がありますか？
どちらもはみ出した部分を切り取ります。非表示の場合はスクロールコンテナが作られるため、スクリプトからスクロールでき、内部の固定配置（sticky）にも影響します。切り取りはあらゆるスクロールを禁止し、切り取り用のマージンを指定すれば、切り取る前にコンテンツを端から数ピクセルだけはみ出させることもできます。
表のセルの中でテキストを省略するには？
表のレイアウトを固定に設定して列に幅を指定し、セルにいつもの折り返し禁止、非表示、三点リーダーの3点セットを適用します。固定レイアウトにしないと、列がテキストに合わせて広がるだけです。別の方法として、セルに幅100%と最大幅0を指定するやり方もあります。
はみ出し設定の5つの値
- 表示（visible）は既定値で、周囲のレイアウトに影響を与えずにコンテンツをボックスの外側まで描画します。非表示と切り取りはパディングの端で切り取ります。常にスクロールの設定は何もはみ出していなくてもスクロールバーを表示し、自動の設定は必要なときだけ表示します。ほとんどの場合、自動のほうが良い選択です。
- overflow は横方向と縦方向の指定をまとめたショートハンドです。片方の軸を表示、もう片方を非表示にしても、書いたとおりには動きません。この組み合わせではブラウザーが表示を自動として計算するため、予期しないスクロールバーが表示されることがあります。例外は切り取りで、表示と組み合わせて使えます。
収まらない単語を改行する
- 単語の途中での折り返しを許可する指定は、必要に応じて長い単語を改行しますが、ボックスが最も長い単語より小さく縮むことは許さないため、フレックスアイテムや表の中では依然としてはみ出すことがあります。任意の位置での折り返しを許可する指定はその最小サイズも下げるので、狭いサイドバーで長いURLがはみ出す問題を解決できます。
- 自動ハイフネーションは、ブラウザーが対応している言語では正しい音節の区切りにハイフンを挿入し、両端揃えや幅の狭いドイツ語やオランダ語のテキストをはるかに読みやすくします。Safariの一部のバージョンは -webkit-hyphens しか理解しないので、両方を書きましょう。改行位置を自分で決めたい場合は、手動ハイフネーションと ­ のソフトハイフンを使います。
テキストの省略とアクセシビリティ
- 切り取られたテキストもページ上には存在するので、スクリーンリーダーは全文を読み上げます。これは良いことです。困るのは、キーボードやタッチで操作する目の見えるユーザーです。ホバーしてツールチップを表示できないからです。
- 重要な商品名やメッセージには、三点リーダーだけに頼らず、「もっと見る」ボタンや details 要素などテキストを展開する手段を用意しましょう。行数制限は、1クリックで全文を読めるプレビューに限って使いましょう。
はみ出し設定の値の比較
各値の動作
- 値
- はみ出したコンテンツ
- スクロールバー
- スクロールコンテナになるか
- Tailwind
- パディングの端で切り取られる
- 表示しない
- はい（スクリプトでスクロール可能）
1行の三点リーダー
三点リーダーの3行レシピ
3つの宣言のどれか1つでも削除すると、三点リーダーは消えます。title 属性で全文を参照できるようにしておきます。
フレックスの行の中での三点リーダー
真ん中の要素にはテキスト幅より小さく縮めるよう最小幅0を指定します。これがないと、代わりに行全体がはみ出します。
複数行の行数制限
カードの説明文を3行に制限する
下のプレフィックス付きのパターンが広くサポートされている書き方です。すでに対応しているブラウザー向けに、プレフィックスなしの宣言も追加しています。
単語の改行に関する3つのプロパティの比較
長い単語の改行
- overflow-wrap: break-word
- はみ出す場合に限り単語の途中
- ときどき長い単語が入る本文
- overflow-wrap: anywhere
- 同上に加え、ボックスの縮小を許可
- フレックスアイテムや狭い列の中のURL
- wrap-anywhere (v4.1)
- word-break: break-all
- 常に任意の文字の間
- コード、ハッシュ、ID
- word-break: keep-all
- CJKの単語の途中では改行しない
- 中国語、日本語、韓国語
- hyphens: auto
- 音節の区切りでハイフン付き
- 言語指定のある幅の狭いテキストや両端揃えのテキスト
同じURLを4つの改行設定で
各ボックスの幅は160pxです。最後のボックスだけはみ出したままにしています。
表のセルでのテキスト省略
固定レイアウトの表と三点リーダーのセル
固定レイアウトにすると列の幅がコンテンツより優先されるので、三点リーダーが機能するようになります。
長いURL
ドイツ語の複合語
段落
新鮮なコーヒー豆を毎週火曜日に焙煎し、その日の午後に発送しています。そのため、ほとんどの地域には焙煎から3日以内、風味がいちばん良い状態のうちにお届けできます。
三点リーダー単体では折り返しの禁止（または行数制限）が必要です。
三点リーダーには、はみ出しの設定を非表示か切り取りにする必要があります。
行数制限で残りを切り取るには、はみ出しを非表示にする必要があります。
はみ出しの実験室
サンプルテキスト
ボックスの幅：{n}px
単語の改行
行数制限：
{n}行
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る