SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのtext-overflowの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 8:04動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、テキストオーバーフローです。
  4. 0:07これは、決められた幅に文章が入り切らないとき、はみ出した部分をどう知らせるかを決めるプロパティです。
  5. 0:14代表的なのは、文の末尾を三点リーダー、いわゆる点々で置き換えて、まだ続きがあることを伝える使い方です。
  6. 0:22カードのタイトルやファイル名などでよく見かけます。
  7. 0:26ただし大切なのは、このプロパティだけで文字が切り詰められるわけではない点です。
  8. 0:32この動画では、効くための条件と、代表的な値の違いを実例で比べながら解説します。
  9. 0:38長いタイトルが混ざる一覧でも、行の高さがそろうと全体が読みやすくなります。
  10. 0:44その整え役として覚えておくと便利です。
  11. 0:47まず基本の書き方です。
  12. 0:48セレクターを書いたら、テキストオーバーフローと書き、コロンのあとに値、最後にセミコロンを付けます。
  13. 0:55スライドの例では、エリプシスを指定しています。
  14. 0:59これで、条件がそろったときに、はみ出した末尾が省略記号に置き換わります。
  15. 1:04エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
  16. 1:13まずはこの一行を書き、長い文章の末尾がどう変わるか確かめてみましょう。
  17. 1:18値のスペルを間違えると宣言ごと無効になるので、注意してください。
  18. 1:23次に、このプロパティが効くための条件です。
  19. 1:26実は三つの指定をそろえる必要があります。
  20. 1:29一つ目は、幅や最大幅による制約です。
  21. 1:31幅が決まらなければ、はみ出し自体が起きません。
  22. 1:35二つ目は、オーバーフローをヒドゥンにすることです。
  23. 1:38はみ出した部分を隠すことで、初めて切り詰めの対象になります。
  24. 1:43三つ目は、ホワイトスペースをノーラップにすることです。
  25. 1:47改行を禁止して一列に並べることで、行の末尾ではみ出しが起きます。
  26. 1:52この三つが三点セットです。
  27. 1:53一つでも欠けると、エリプシスを指定しても点々は表示されません。
  28. 1:58逆にいえば、点々が出ないときは、この三つのどれかが欠けていることがほとんどです。
  29. 2:04確認の順番として覚えておきましょう。
  30. 2:07ここでは、記事でも比較している二つの代表値を見ます。
  31. 2:11エリプシスは、はみ出した末尾を三点リーダーに置き換えます。
  32. 2:16読み手には、文章にまだ続きがあることが一目で伝わります。
  33. 2:20もう一つのクリップは初期値で、はみ出した部分をそのまま切り取ります。
  34. 2:26文字の途中でぷつっと切れたように見え、続きがあることは記号では伝わりません。
  35. 2:32場面でいうと、一覧のタイトルなど、全文が別で読めるときはエリプシスが親切です。
  36. 2:38まずはこの二つを切り替えて、行末の見え方の違いを自分の目で比べてみてください。
  37. 2:45なお、点々はブラウザーが自動で付ける表示で、元の文章データ自体が書き換わるわけではありません。
  38. 2:53コピーすると全文が得られます。
  39. 2:55初期値と継承について整理します。
  40. 2:58テキストオーバーフローの初期値は、クリップです。
  41. 3:02つまり、何も指定しなければ、はみ出した文字は記号に変わらず、そのまま切り取られます。
  42. 3:09そして、このプロパティは親から通常は継承しません。
  43. 3:13親にエリプシスを指定しても、子要素に自動では伝わらないので、省略したい要素自身に指定する必要があります。
  44. 3:22また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
  45. 3:26普段は値を直接書くことがほとんどです。
  46. 3:31仕様上の初期値とブラウザーの既定表示が同じとは限らない点も覚えておきましょう。
  47. 3:37ここからは記事の実例です。
  48. 3:40エイチティーエムエルでは、ステージというクラスを付けた箱の中に、デモというクラスを付けた箱を入れます。
  49. 3:47その中身は、スペースのない、とても長いユーアールエルの文字列です。
  50. 3:53途中で折り返す場所がない長い文字列だと、横幅からはみ出す様子が分かりやすくなります。
  51. 3:59頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  52. 4:05比べたいのはテキストオーバーフローだけなので、文章などの土台は固定したままにします。
  53. 4:11親と子の入れ子の構造を先に頭に入れておきましょう。
  54. 4:15記事の例では、この長い文字列そのものが比較の材料になります。
  55. 4:20短い文章でははみ出しが起きず、値の違いが見えないためです。
  56. 4:24土台のシーエスエスです。
  57. 4:27ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意します。
  58. 4:34デモの最大幅は十五レムに絞り、ホワイトスペース、ノーラップとオーバーフロー、
  59. 4:39ヒドゥンで、一行に収めてはみ出させる条件をそろえます。
  60. 4:45最後の行でテキストオーバーフローをエリプシスにすると、行末が点々に変わります。
  61. 4:52次に最後の行だけをクリップへ置き換えると、記号は出ずに文字が途中で切れます。
  62. 4:58この一行の違いが比較ポイントです。
  63. 5:01保存して再読み込みし、行末だけに注目してください。
  64. 5:05幅を少しずつ変えてみると、点々が現れる位置も一緒に動くことが分かります。
  65. 5:11はみ出しが幅に左右される様子も確認してください。
  66. 5:16活用場面を考えてみましょう。
  67. 5:18よく使われるのは、カードや商品一覧、記事一覧のタイトルです。
  68. 5:22タイトルの長さがばらばらでも、各行の高さを一行にそろえられるので、一覧全体が整って見えます。
  69. 5:29表のセルや、横並びのナビゲーション項目、長いファイル名の表示でも同じ考え方が使えます。
  70. 5:36ただし、省略された全文がどこかで読めることが前提です。
  71. 5:40詳細ページで読めたり、タイトル属性やツールチップで全文を確認できたりする設計と組み合わせてください。
  72. 5:47見た目をそろえることと、情報を失わないことを両立させるのがコツです。
  73. 5:52効かないと感じたときの注意点です。
  74. 5:55まず最も多い原因は、先ほどの三点セットの不足です。
  75. 5:59幅の制約があるか、オーバーフローがヒドゥンになっているか、ホワイトスペースがノーラップになっているか、
  76. 6:04この三つを順番に確認してください。
  77. 6:09もう一つの誤解は、複数行の文章をこのプロパティだけで省略しようとする使い方です。
  78. 6:15テキストオーバーフローが扱うのは基本的に一行の行末だけです。
  79. 6:19そのうえで、開発者ツールで順番に調べます。
  80. 6:23ネットワークで取得、エレメンツでクラスの一致、スタイルズで上書きの有無、
  81. 6:27コンピューテッドで最終的な値を確認してください。
  82. 6:32最後に、三百二十ピクセル程度の狭い画面幅でも、内容を利用できるか確認しましょう。
  83. 6:38ブラウザー互換性を確認します。
  84. 6:40記事が参照するエムディーエヌの記録では、クロームは一以降、エッジは十二以降、
  85. 6:47ファイアフォックスは七以降、サファリは一・三以降と、とても古い版から対応が示されています。
  86. 6:53アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
  87. 6:59値ごとに見ても、クリップとエリプシスで対応の範囲はほぼ共通ですが、一部に補足条件ありと注記されています。
  88. 7:07古くから広く使えるプロパティといえますが、細かな挙動は対象ブラウザーで実物を確認すると安心です。
  89. 7:14スマートフォン向けのブラウザーでも早い時期から対応しているので、画面幅が変わりやすいレスポンシブな一覧でも使いやすい指定です。
  90. 7:24最後に練習とまとめです。
  91. 7:26まとめます。
  92. 7:27テキストオーバーフローは、幅からはみ出した一行の末尾を、省略記号で示すか、
  93. 7:32そのまま切り取るかを決める設定で、初期値はクリップ、継承はしませんでした。
  94. 7:37そして、幅の制約、オーバーフロー、ヒドゥン、ホワイトスペース、ノーラップの三点セットがそろって初めて効きました。
  95. 7:45練習として、まずエリプシスとクリップの違いを言葉で説明し、次に文章量や親の幅だけを変えて、
  96. 7:50結果がどう変わるかを比べてみてください。
  97. 7:55お疲れさまでした。
  98. 7:56関連するホワイトスペースとオーバーフローも一緒に学ぶと、文字のはみ出しをまとめて扱えるようになります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

text-overflowの役割と主な指定値を解説。1行に収まらない文章の末尾が省略記号へ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのtext-overflowの使い方：指定値・実例・効かない原因とブラウザー互換性 →