[33-2] 単語の途中でも改行させるCSS「word-wrap: break-word」

最終更新日:2017年11月05日  (初回投稿日:2012年01月31日)

今回は、単語の途中でも改行しちゃう「word-wrap: break-word」というCSSを紹介します。
長いけど別にどこで切ってもいい単語(URLなど)を表示する時に役に立ちます。

CSSプロパティ word-wrap
break-word

この word-wrapプロパティの他の値は、「normal(初期値)」だけ。

ブラウザは、word-wrap: normal なら 英語など外国語の場合、ブラウザは単語の途中で改行しないようになっています。「半角スペース」「-(ハイフン)」「/(スラッシュ)」などの直後で改行します。

ですが、URL やメールアドレスなど、どこで改行してもらってもOKな場合、手作業で <br> や <wbr> を入れるのも面倒です(ユーザの閲覧環境によって表示領域の幅は変わりますし)。
そんな時に、この「word-wrap: break-word」を指定しておくと、勝手に「1文字単位で領域幅に合わせて改行」できるようになります。

前回の<wbr>要素は、ブラウザに「単語を勝手に壊させず、改行していい所を指定」しました。
今回のCSS「word-wrap: break-word」は「単語を壊していいから、表示幅に合わせて改行」と指示します。

「word-wrap: break-word」を使ってみよう

サンプルを見てみましょう。あえて幅の狭いブロックを作っています。
break-word のほうは、単語の途中でも改行されています。

break-word
http://honttoni.blog74.fc2.com/blog-entry-21.html
normal
http://honttoni.blog74.fc2.com/blog-entry-21.html

HTMLはこちらです。

<dl>
<dt>break-word</dt>
<dd class="wrbreak">http://honttoni.blog74.fc2.com/blog-entry-21.html</dd>
<dt>normal</dt>
<dd class="wrnormal">http://honttoni.blog74.fc2.com/blog-entry-21.html</dd>
</dl>

CSSはこちらです。

#w-wrap {
	border:1px solid #ccc;
	padding:1em;
	margin:1em 0;
	width:150px;
	}
.wrbreak {
	word-wrap:break-word
	}
.wrnormal {
	word-wrap:normal
	}

日本語の場合は注意が必要です。
日本語で「word-wrap: break-word」が指定されていると、「。」や「、」が先頭になるように改行されたり、「キャッシュ」といった促音や拗音が先頭になって「キ」「ャッシュ」と改行されたりします。
こんなときは「word-wrap: normal」に戻しましょう。

次回予告

次回はHTMLに戻って、<bdo>要素を紹介します。
<bdo>は、文字の表示方向を指定する要素です。
普通、文字の表示は「左から右」ですが、ヘブライ語など「右から左」に表示したい箇所に使います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.