It's my pc life…

ふと気がつけばいつの間にやら PC と出会い20年超の、初級者以上中級者未満の徒然 PC 生活記録

【WordPress】コメント欄文章が改行されずに枠外へ突き抜けていく問題に対処

  1. WebDesign ・ Coding

 コメント欄の CSS 装飾の手直しのため適当にコメントを入力して実験していたら、入力したコメントがカラム枠を突き抜けて画面外へと突き抜けていく問題が発生。

 この時入力した文章は、半角数字「111222333」あるいは全角での「111222333」など。

 色々調べてみると、どうやらブラウザの仕様によっては半角英数字等の文字間隔の無い、途中でスペース等も一切含まない連続した文字列で構成された文章では、このような現象がしばしば起きるっぽい。
 今回入力した数字のみの内容はまさに「文字間隔のない文章」に合致。他にも URL エンコードされた日本語タイトルを含む長いアドレスなんかも含まれるとのこと。

問題

 WordPress コメント欄において、半角英数字あるいは全角英数字といった文字間隔のない長い文字列を入力した場合、カラム枠で改行されず枠外へと突き抜けて表示されてしまう。

 今回発生したのはコメント欄だが、環境等の条件によっては本文記事等でも同様の現象が発生する場合があるとのこと。

目的と解決方法

目的:入力した文章が如何なる文字列であってもカラム枠内で改行・収まるようにすること

 英数字のみで途中にスペースも挟まない連続した文字列になるような文章は基本的にスパム目的以外ではそうそうあり得ないが、例えば URL を入力するなどの例外がないわけでもない。

 本来なら放置していても別段問題になることは少ないと思われるが、そうした「例外」が発生する可能性を鑑みて、こうした文章が入力されても問題なく枠内で改行・表示されるように対処する。

利用環境

 問題解決のための利用環境は以下の通り。

  • OS:Windows10 Pro x64 bit / Ver.1607 Build 14393.576
  • WordPress:Ver.4.7-ja
  • WordPress Theme:Original(自作)

解決方法

 コメント表示部分の親要素あるいは段落タグ<p>に以下のプロパティを設定する。

 word-wrap は単語の途中で改行するかどうかを指定するプロパティで、値には

  • normal:単語途中で改行しない。必要に応じて表示範囲を拡大する。
  • break-word:必要に応じて単語途中で改行する。

 上記2種類があり、初期値は normal。この値を break-word に指定することで、今回のようなブラウザから見て「改行する部分」が不明瞭な連続した文字列の途中でも改行を実行させることが可能となる。

 word-wrap は子孫要素へと値が継承されるため、html 要素や boby 要素に指定すればわざわざ個別に設定する必要が無いため手っ取り早いが、そもそもこうした事態は日本語圏でのサイト・ブログなら滅多に起こることはないため、今回はあくまでもコメント欄に関する部分のみの指定とした。

CSS3 では word-wrap は overflow-wrap に改名

 余談だが、word-wrap は CSS3 にて overflow-wrap に改称された(値は同様)。word-wrap は元々 Internet Explorer 5.5 にて独自実装されたプロパティだったのが、CSS3 で正式に策定・実装される形になった。

 そのため CSS3 では word-wrap ではなく overflow-wrap を使用するのが適切だが、overflow-wrap はまだ対応するブラウザが少なく、互換性では word-wrap の方が圧倒的に上のため、CSS3 でも word-wrap は overflow-wrap の「別名」として使用可能となっている。

 そのため今回は互換性重視で word-wrap を用いたが、もし overflow-wrap を用いるなら、互換性を保つためにも同時に word-wrap による記述も行った方が無難とされる。

 今回はこれが面倒だったので word-wrap にしたというのもあるが(笑)

まとめ&参考サイト

 今回参考にさせて頂いたサイト・ブログはこちら。

 今回紹介した word-wrap による改行は、基本的には特に設定しなくとも問題が出るような事態はほとんどなく、むしろ word-wrap: break-word; の記述があるがゆえに単語が妙な部分で改行されるという弊害が起こる可能性もあるので、あまり気にしない方がいいのかもしれない。

 今回は気になったので設定したけど(笑)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメント更新情報

トラックバック

トラックバックURL: http://itsmy.first-pclife.com/web-wordpress/webdesign-coding/post-511/trackback