2020-07-15の開発

現役のエンジニアが毎日どんなことを学んで、どんな開発を行っているのか雑にアウトプットしてみる試みの3日目です。

禁則処理とword-break

CSSのテキストについての話。

禁則処理とは、Wikipedia によると以下のような定義。

禁則処理（きんそくしょり）とは、特に日本語の文書作成・組版において、「約物などが行頭・行末などにあってはならない」などとされる禁止事項、または、それらを回避するために、字詰めや文の長さを調整したりすること。例えば、句読点（。、）や閉じ括弧（」』)】など）と言った約物は、当該文章の行頭に位置させてはならない。

行頭に、句読点や閉じカッコを表示しないような禁止事項らしい。

word-break は、長い単語などで表示サイズからはみ出してしまうようなケースにどのように改行をするかを制御するCSSプロパティ。

word-break を以下のようにすると、どんな単語の途中でも折り返しがなされるが反面、禁則処理が入らなくなってしまう。

.hoge {
  word-break: break-all;
}

overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita

上記の記事にある通り若干ややこしいが、以下の通り設定したらとりあえず禁則事項をいれつつ、テキストも良い感じに改行するように制御することができた。

.hoge {
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-break: strict;
}

下記のサイトが非常に参考になった。

CSSによる文字の折り返し制限・改行の禁則処理の指定方法まとめ | WEMO

こういう禁則事項とか、word-break の話って、サービスを作っている人からすると一度は出会う問題で割と既知の問題だが、不具合に出会わないと一切知る必要のない知識だったりするので、上記の記事のようにこうやって知識がシェアされてるの素晴らしいなぁと改めて実感した。