Zenn
📘

cssのwhite-spaceの使い方を整理してみた

2021/07/26に公開
CSS
tech

はじめに

こちらの記事の続きで、今度はwhite-spaceって何だっけってなってしまった。。

cssのword-breakとoverflow-wrapのどっち使うか迷ったので整理した https://zenn.dev/katoaki/articles/93f6439734129b

ということで、cssで折り返しするかどうかを設定する際に、よくプロパティを忘れてしまうので、整理することにしました。
なお、どう折り返しするかの設定（word-break, overflow-wrap）についてはここでは省きます。

やってみたこと

折り返しに関する仕様の整理

関係するCSSプロパティ

折り返しする・しない、する場合にはみ出したらどうするかに関するCSSプロパティは以下です。

  • white-space
  • word-break
  • overflow-wrap

ここではそもそも折り返しする・しないを設定するwhite-spaceに関してのみ確認することにしました。

white-spaceとは

要素内の空白文字（スペース、タブ、改行）を制御する方法を設定するCSSプロパティです。
次の設定値があります

  • pre
  • pre-wrap
  • break-spaces
  • pre-line
  • nowrap
  • normal

それぞれで行われることの概要は以下です。

スペースをまとめる タブをまとめる 改行をまとめる 折り返しする 行末 コードのまんま度(※)
pre 変更なし 100
pre-wrap ✔ ぶら下げ 75
break-spaces ✔ 折り返す 75
pre-line ✔ ✔ ✔ 除去 25
nowrap ✔ ✔ ✔ 除去 25
normal ✔ ✔ ✔ ✔ 除去 0

※：htmlで書いた内容そのままの表現になるかどうかを勝手に表したもの

動かしてみる

実際に動かしてみることにしました。

次のようなブロック要素に対して各値を設定するとどうなるかを確認するコードを作成しました。

      <div class="normal">今日はとても天気がよかったので、近くの    パン                        屋さんまで歩いて買い物に行ってみました<br>が、
    
      定休日でした。</div>

なお、無駄に実話です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outer{
      display: flex;
    }
    .ws div{
      border: 1px solid #000;
      width: 25em;      
    }

    .normal{
      white-space: normal;
    }
    .nowrap{
      white-space: nowrap;
    }
    .pre{
      white-space: pre;
    }
    .pre-wrap{
      white-space: pre-wrap;
    }
    .pre-line{
      white-space: pre-line;
    }
    .break-spaces{
      white-space: break-spaces;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="ws">
      pre:
      <div class="pre">今日はとても天気がよかったので、近くの    パン                        屋さんまで歩いて買い物に行ってみました<br>が、
    
      定休日でした。</div>  
    
      pre-wrap:
      <div class="pre-wrap">今日はとても天気がよかったので、近くの    パン                        屋さんまで歩いて買い物に行ってみました<br>が、
    
      定休日でした。</div>  

      break-spaces:
      <div class="break-spaces">今日はとても天気がよかったので、近くの    パン                        屋さんまで歩いて買い物に行ってみました<br>が、
    
      定休日でした。</div>

      pre-line:
      <div class="pre-line">今日はとても天気がよかったので、近くの    パン                        屋さんまで歩いて買い物に行ってみました<br>が、
    
      定休日でした。</div>  

      nowrap:
      <div class="nowrap">今日はとても天気がよかったので、近くの    パン                        屋さんまで歩いて買い物に行ってみました<br>が、
    
      定休日でした。</div>  

      normal:
      <div class="normal">今日はとても天気がよかったので、近くの    パン                        屋さんまで歩いて買い物に行ってみました<br>が、
    
      定休日でした。</div>      
    
    </div>
  </div>

</body>
</html>

動作確認

まとめ

  • white-spaceには次の値を設定すると折返しが行われる
    • normal
    • pre-wrap
    • pre-line
    • break-spaces

参考

Discussion