ワードプレスで作成した記事の文章にある英文字(英単語)を途中で改行する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

日本語でウェブサイトを運営していると「英単語の扱いに困る場面」があります。

どういったシーンかと言えば「英単語の改行位置」です。日本語であれば折り返しは単語の途中で文字に改行がかかっても違和感はありません。ただし、英語になると少し話が変わってきます。

英単語が状況に応じて「文字の途中で改行するかしないか?」は好みです。個人的には文章全体の見た目が自然なら改行の有無は問題ないと考えています。ウェブサイトによっては「英単語がはみ出る」設定(英単語に改行が効かない)になっている場合もあるのでその点は注意が必要です。

ワードプレスで作成した記事の文章にある英文字(英単語)を途中で改行する方法

まずは当研究所の設定状況を見ていただくとイメージしやすいかもしれません。以下の文章を見ていただければ「Simple」という単語が「lとe」で改行がかかっていますよね。英単語の改行位置です。

英単語単位で折り返す方法

英単語をどこで改行させるか?はCSSの設定でコントロール可能です。

word-break: break-word;

上記を適用した後の状態が以下。さきほどの「Simple」が下側へ降りていますよね。

 

英単語の文字途中で折り返す方法

ちなみに元々、単語途中で改行をかけていたCSSは以下です。

word-break: break-all;

カンタンな覚え方としては「単語の改行(ブレイク)ポイント」が「word(単語)」なのか「all(すべて)」なのかで英単語の扱い方が変わるという考え方。当研究所では「長い英単語」を扱うこともあるので余計な空白が空いてしまう可能性も考慮して「break-all」としています。取り扱うコンテンツによりそうです。

少し前は「word-wrap」もあった

懐かしいCSSに以下がありますよね。同じく英単語の改行を決めるプロパティです。

word-wrap: break-word;

細かく言うと「word-wrap」はMicrosoft系のブラウザ向けに開発されたCSS。しかし、CSSの進化で現在は「word-wrap」が廃止となって「overflow-wrap」へ変更済み。

overflow-wrap: break-word;

上記でご紹介したプロパティも含め両方とも併用して使われるのが一般的です。

body {
	overflow-wrap:break-word;
	word-break:normal;
}

色々な指定方法があるのでご自身でも最適な組み合わせをお試しくださいませ。

まとめ

本日は「英単語に対する改行の扱い方」についてご紹介いたしました。

本記事でご紹介したCSSは「英単語を扱わないウェブサイト」であれば設定不要です。海外の言語を掲載している場合などで長い単語を文章で書く可能性があればぜひご活用くださいませ。

文字の改行位置まで指定できるCSS。本当に便利ですよね。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

💻手に職をつけて安定的に働きたい人

⇒ 完全無料のプログラミングスクール - 受講料無料でプログラミング習得 -

お困りの内容があれば詳しい内容をお聞かせください