インラインのcode要素を親要素からはみ出さないようにする方法

code要素が記事のエリアから飛び出す事象が発生

下のような感じでcode要素が飛び出してしまいました。そのせいで、スマホで見た場合は、必要の無い横スクロールが発生してしまいました。

記事からはみ出る画像

解決策

試行錯誤した結果、二つの解決策があります。

word-wrapをbreak-wordに設定する

1
2
3
4
5
6
7
8
code{
  word-wrap: break-word;
  padding: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

2行目のように設定することによって、親要素からはみ出す場合は、単語の途中でも改行するようになります。

word-wrapを設定した画像

displayにinline-blockを設定する

1
2
3
4
5
6
7
8
code{
  display: inline-block;
  padding: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

2行目のように設定することによって、親要素からはみ出す場合は、その要素自体を次の行から開始します。

inline-blockを設定した画像

メソッド名の途中で改行されるのもわかりずらいので、この方法を選択するのがオススメです。

羊毛や小麦