word-wrapを使って文字列がはみ出ないようにする方法（主にSimplicity向け）

どうも。ノッツです(^o^)/

久しぶりのブログカスタマイズ系の記事です。

別のブログでとあるコメントをいただいたときに、コメント一覧の通常の範囲からはみ出て文字列が表示されてしまいました。それは、記号を連続的に入力された文字が入ったコメントです。

このようにアルファベットや記号、長いURLが連続すると、通常の範囲から文字列がはみ出て表示されてしまうことがあります。日本語であれば、はみ出ることはありません。

はみ出てしまうと、特にモバイル表示ではユーザービリティー的に良くないです。

ということで、文字列がはみ出ないような対策を行ったので、これについて書いていこうと思います。

文字列がはみ出て表示

記号が連続して入力された文字が入ったコメントをいただいた際に、通常の範囲からその文字列がはみ出て表示されました。

以下の画像はそのときをイメージしてテストでコメントをしています。

パソコン表示の場合

パソコン表示のコメントの一覧のところです。

はみ出ていることが分かります。

パソコン表示のサイドバーに設置している、コメントウィジェットのところです。

こちらもはみ出ています。

モバイル表示の場合

モバイル表示のコメントの一覧のところです。

左にスワイプすると、はみ出ていることが分かります。

モバイル表示のサイドバーに設置している、コメントウィジェットのところです。

こちらも左にスワイプすると、はみ出ていることが分かります。

全体を縮小すると以下のようになり、通常の範囲からはみ出ていることが確認できます。

文字列がはみ出て表示されると

アルファベットや記号、長いURLが連続すると、通常の範囲から文字列がはみ出て表示されてしまうことがあります。

これについては把握していて、こうならないためにも気をつけて記事を書いてきました。だだ、いただくコメントまでは気をつけることはできません。

パソコン表示の場合は見かけ上の問題ですが、モバイル表示ではユーザービリティー的に良くありません。

それは、下にスライドするつもりが、横にずれてしまう（横にスワイプしてしまう）ことがあるためです。

ということで、これらのことを改善することにしました。

文字列がはみ出て表示されるのをCSSで修正

はみ出て表示されるのは、HTMLとCSSデフォルトの仕様となってしまいます。

そのため、CSSで簡単に設定して改善することができ、CSSのプロパティ「word-wrap」を使用します。

基本的には、以下のプロパティにセレクタを指定すればできます。

word-wrap: break-word;

「word-wrap: break-word;」を使って修正する代表的な方法

以下に「word-wrap: break-word;」を使って、文字列がはみ出ないようにする修正する代表的な方法を記載します。

当サイトのWordPressのテーマは「Simplicity」を利用していますので、主にSimplicityでの説明となります。

なお、Simplicityの作者はこちらのことは把握しており、英単語の途中で改行されることもあるので、あえてしていないとのことです。

以下のコードを子テーマなどのスタイルシートにコピペすれば使えると思います。複数の組み合わせも可能です。

全体に適用する場合

こちらは、Simplicity以外のテーマでも適用可能だと思います。

ブログ全体に適用したい場合は、以下のように設定します。

body {
  word-wrap: break-word;
}

以下のようにしても全体に適用することができます。

* {
  word-wrap: break-word;
}

記事本文中のみに適用する場合

記事本文中のみに適用したい場合は、以下のように設定します。

#the-content {
  word-wrap: break-word;
}

コメント一覧のみに適用する場合

コメント一覧のみに適用したい場合は、以下のように設定します。

#comment-area {
  word-wrap: break-word;
}

サイドバー全体のみに適用する場合

サイドバー全体のみに適用したい場合は、以下のように設定します。

#sidebar {
  word-wrap: break-word;
}

サイドバーのコメントウィジェットのみに適用する場合

サイドバーのコメントウィジェットのみに適用したい場合は、以下のように設定します。

.widget_recent_comments {
  word-wrap: break-word;
}

引用文のみに適用する場合

引用文のみに適用したい場合は、以下のように設定します。

blockquote {
  word-wrap: break-word;
}

修正した結果

パソコン表示とモバイル表示の両方で、改行され折り返して表示させることができました。

とりあえず、ブログ全体に適用するように設定しています。

body {
  word-wrap: break-word;
}

様子を見て、今後は一部に適用されるように変えようと思います。

パソコン表示の場合

パソコン表示のコメントの一覧のところです。

パソコン表示のサイドバーに設置している、コメントウィジェットのところです。

モバイル表示の場合

モバイル表示のコメントの一覧のところです。

モバイル表示のサイドバーに設置している、コメントウィジェットのところです。

さいごに

「word-wrap: break-word;」を使って、文字列がはみ出ないように修正しました。

上記でも述べましたが、英単語の途中で改行されるなど、意図しないように改行されることもあるので注意が必要です。

文字列がはみ出てしまうと、特にスマホ表示の場合はユーザービリティー的に良くないので修正を行ってみました。