URLテキストなど英数文字を自動改行で表示させる方法

URLをテキストで記載するなど、英数文字の長い文字列はブラウザの幅を超えても改行されずにどこまでも続くことがあります。
この原因は“禁則処理”の影響です。

自動改行

一つの文節が長い場合には、画面の端で自動改行されるようになっているのですが、自動改行しない設定になっているケースがあります。
自動改行されないとレイアウトが崩れたり、横スクロールが必要になったり、スマホでは非常に見づらい状態になり、モバイルフレンドリーに反することにもなります。

自動改行されない原因

英語では単語の途中で改行すると、意味が分からなかったり、違う意味になってしまうことがあります。
「ドメインを取得」は「Get domain」と書きますが、domainの途中で改行すると次のようになります。

Get do
main

ドメインと読めずに「ドウ メイン」と読んでしまうかもしれません。

日本語でもこのようなことがあり、文末の句読点が改行によって、次の行の文頭にくるようなことがあります。

どんな状態になるのかテストページを見てみましょう。

このように改行によって文章の意味が伝わらなくなるのを防ぐ為、自動改行をしない設定がされています。

自動改行を行う設定方法

自動改行を行うにはCSSファイルに必要なコードを書込んでおきます。
WordPressは使うテーマによって、あらかじめ設定されているテーマもあります。

自動改行のコードは

word-wrap: break-word;

ですが、CSS3になって名称が変わり

overflow-wrap: break-word;

になっていますが、ユーザーによっては古いブラウザを使っているかも知れないので、「word-wrap: break-word;」を使う方がよさそうです。

CSSファイルに書込む時は要素に直接書込む場合と、クラス属性として書込む方法があります。

段落要素のすべてに自動改行を適用する時は次のようにします。

div {
	word-wrap: break-word;
}

/* 又は */

p {
	word-wrap: break-word;
}

クラス属性で指定する場合

.newline {
	word-wrap: break-word; /* クラス名は任意です */
}

クラス属性で指定した場合は、<p class=”newline”>タグとか<span class=”newline”>タグを使って文章を書込みます。

WordPressテーマにあらかじめ設定されているケース

WordPressテーマによってはディフォルトで自動改行の設定が行われているテーマがあります。

Simplicity2の場合
word-wrap: break-word;を設定している要素やクラスがいくつかありますが、「index.phpのリスト」に次のコードがあります。

.entry-snippet,
.related-entry-snippet{
  word-wrap: break-word;
}

<p class=”entry-snippet”>~</p>とか<span class=”entry-snippet”>~</span>内に長いURLのテキストを書きます。
ただし、アンカーテキストの場合は自動改行しますので、特に何もしなくても大丈夫です。

賢威の場合
「賢威」は日本語のサイトに使われることが前提なので、<div>に自動改行が設定されています。だから何もしなくて大丈夫です。
Twenty Fifteenの場合
.entry-content,
.entry-summary,
.page-content,
.comment-content {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word;
}

主要な要素に自動改行が設定されています。このテーマも何もしなくても大丈夫です。

Twenty Sixteenの場合
.site-content {
	word-wrap: break-word;
}

サイトコンテンツ全体に自動改行が設定されています。このテーマも何もしなくても大丈夫です。

Twenty Seventeenの場合
#page {
	position: relative;
	word-wrap: break-word;
}

このテーマもサイトコンテンツ全体に自動改行が設定されています。このテーマも何もしなくても大丈夫です。

英語版のテーマも自動改行になっているようですが、では英語のテキストを書込んだ場合にどのように見えるかをテストしてみます。

使うテーマは「Twenty Seventeen」です。

word-wrap

単語の途中で改行されること無く、いい感じで改行されています。

では、英語のコンテンツの場合、自動改行設定しているのに単語の途中で改行されないのは何故か?という疑問が浮かんできますが、単語の途中の改行を禁止する禁則処理はまだ有効になっています。

単語の途中だろうが、句読点が文頭に来ようが構わないという、とにかく自動改行してしまう場合のプロパテイは「break-all」です。

word-wrap: break-all;

とやっちゃうと単語のつづりを無視して改行してしまうので、このプロパティは使わないようにしましょう。