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

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

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

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

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

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

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

code{

display: inline-block;

padding: 0.2em;

margin: 0;

font-size: 85%;

background-color: rgba(0,0,0,0.04);

border-radius: 3px;

}

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

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

そして、一つお願いしたいことがあります。

もしこの記事がお役に立てたのなら、下のボタンからSNSでシェアするか、あなたのブログでご紹介頂けないでしょうか？検索エンジンの仕組みで、同じ問題で今困っている方の目に届きやすくなります。もちろん、私としても記事を書くモチベーションになります。

記事への要望やダメ出しを書いて頂いても嬉しいです。定期的にエゴサーチしており、今後の記事で活かさせて頂きます。よろしくお願いいたします！