いい感じに改行を行いたい

色々調べた結果、

いい感じな改行を実現するSCSS mixin。

こんな感じになった。

まず、

body {
  word-wrap: break-word;
}

これはURLとかの長い半角文字列が改行されずに親要素の横幅をこえてしまうのを防ぐためにする設定。

次の

pre {
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

これは<pre>の中の改行を良い感じにする設定。 どうもword-break: break-allしないと親要素の横幅を超える場合があるので推奨。

code, kbd, abbr, var, samp {
  &::before,
  &::after {
    content: "\0020";
    font-size: 0;
  }
}

これはcode要素の直前・直後で自動折り返しを発動させるのそっくりそのまま。ただし、これらのインライン要素にdisplay: inline-blockを指定した場合に内側下部分にわずかな空白が生まれる場合があるので、その場合には擬似要素にもdisplay: inline-blockを指定する。

table {
  word-break: break-all;
}

最後のこれはテーブル内で改行がされずにテーブルの横幅が広がってしまうのを防ぐための設定。 table-layout: fixedでも改行直せるけど色々と影響が出てしまうのでこちらのほうが良いと判断した。