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

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

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

この word-wrapプロパティの他の値は、「normal(初期値)」だけ。「normal」だとブラウザは本来の働きをします。本来の働きとは、英語など外国語の場合「半角スペース」「-(ハイフン)」「/(スラッシュ)」などの直後で改行すること。
ですが、URLなど、どこで改行してもらってもOKな時、手作業で <br>や<wbr>を入れるのも面倒ですよね(ユーザの閲覧環境によって表示領域の幅は変わりますから)。
そんな時は、このCSSを指定しておくと、勝手に「1文字単位で領域幅に合わせて改行」してくれて便利です。

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

サンプルを見てみましょう。

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

上の【break-word】のほうは、単語の途中でも改行されているのがわかりますね。

ソースはこちらです。

<dl width:150px;">
<dt>【break-word】</dt>
<dd id="wrbreak">http://honttoni.blog74.fc2.com/blog-entry-21.html</dd>
<dt>【normal】</dt>
<dd id="wrnormal">http://honttoni.blog74.fc2.com/blog-entry-21.html</dd>
</dl>
#wrbreak {word-wrap: break-word;}
#wrnormal {word-wrap: normal;}

日本語の場合、ブラウザは基本的に1文字ずつ改行するので、このような単語ベースの考え方は不要です。

英語などの場合は、ブラウザは単語の途中で改行しないようになっています。単語と単語の間の「半角スペース」や、「-(ハイフン)」「/(スラッシュ)」などの記号の後が、ブラウザにとってデフォルトの「改行可能位置」なんです。
そのデフォルトを解除してやるのが今回の「word-wrap: break-word」です。これによって、1文字単位で改行できるようになります。

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

次回予告

いかがでしたか?

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.