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

work-731198_1280

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

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

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

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

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

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

スポンサーリンク

文字列がはみ出て表示

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

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

パソコン表示の場合

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

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

break-word6

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

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

break-word7

モバイル表示の場合

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

break-word1

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

break-word2

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

break-word3

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

break-word4

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

break-word5

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

全体に適用する場合

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

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

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

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

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

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

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

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

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

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

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

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

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

修正した結果

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

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

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

パソコン表示の場合

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

break-word10

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

break-word11

モバイル表示の場合

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

break-word12

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

break-word13

さいごに

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

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

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

コメント

  1. miwaji より:

    昨日テストしたばかりで右も左もわからず、超ど素人の私でしたがすごく助かりました!ありがとうございます!

    • ノッツ より:

      >miwajiさん
      コメントありがとうございます。
      お役に立てたようでよかったです!