にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

単語途中での自動改行を回避するにはnowrapよりもinline-blockが便利 [テキスト]

日本語のように単語の区切りが曖昧な言語で、単語の途中で自動改行されるのを防ぐ方法としては、spanとかで囲んだ単語に「display: inline-block;」を指定するのが楽です。昔はwhite-space(nowrap)などを使って改行禁止区間を設ける対処方法とかもありましたが、それだと「どうしても改行が避けられない状況」では困ってしまいますから。

単語途中での自動改行を回避するにはnowrapよりもinline-blockが便利

禁則処理の結果として行末に「文頭の1文字」だけが残ってしまうケース今のブラウザでも句読点や長音などを行頭には表示しないというような禁則処理はありますが、「できるだけ単語の途中では自動改行しない」という仕組みができると、もっと読みやすくなります。日本語の文章中でそうするのはあまり現実的ではありませんが、タイトルや見出しなど、短文を大きく掲載するような場合に使うと、読みやすくて便利そうです。

日本語のように単語の区切りが曖昧な言語で、単語の途中で自動改行されるのを防ぐ方法としては、昔はwhite-space(nowrap)などを使って改行禁止区間を設ける対処方法がありました。でも、改行禁止区間を設けてしまうと、「描画領域が狭すぎて、どうしても改行が必要な場合にでも改行されず、横スクロールが発生してしまう」という問題があります。
何もかもを自分1人で書く場合にはそれでも調整可能かもしれませんが、複数人で構築している場合には、うっかり改行禁止区間を長く取り過ぎて、横スクロールを発生させてしまうケースもありそうな気がします。

そこでお勧めなのが、改行を禁止するのではなく、spanなどで囲んだ単語にdisplay: inline-block;を指定する方法です。

改行を禁止するのではなく、単語のまとまりをインラインブロック化する

displayプロパティに値inline-blockを指定すると、その領域はブロックレベル要素っぽく表示されるものの、インライン要素のように配置されます。
これはつまり、

  • その領域が一塊として表示される
  • でも、どうしても必要なら内部で自動改行もされる

……という配置になります。
このdisplay: inline-block;を指定した範囲内に自動改行位置が来てしまった場合は、

  1. そのブロックの直前で自動改行される。
  2. でも、幅が狭すぎてどうしても表示領域が足りない場合は、ブロック内でも自動改行される。

……という表示になります。この(2)の存在がnowrap的な指定よりも便利です。

inline-blockで単語途中の自動改行を回避するソース例

例えば、以下のようなHTMLを書いておきます。できるだけ改行されたくない領域をspan要素で囲んでいるだけです。後からCSSを適用するために、ここではno-wrapというclass名を付加しています。

HTMLソース

ここでは、
<span class="no-wrap">CSS(スタイルシート)</span>を使って
<span class="no-wrap">ウェブページ</span>を
<span class="no-wrap">デザイン</span>する方法を解説しています。

次に、CSSソースを以下のように記述しておきます。ここでは単に、displayプロパティに値inline-blockを指定しているだけです。たったこれだけで良いのでとても手軽です。

CSSソース

.no-wrap {
	display: inline-block; /* インラインブロック化 */
}

上記のようにHTMLとCSSを書いておけば、CSS(スタイルシート)ウェブページデザインの各単語の内側では(できるだけ)自動改行されなくなります。
しかし、絶対に自動改行されないわけではなく、横幅に対して文字量が多いなどの都合で「どうしても改行せざるを得ない状況」では、ちゃんと自動改行されるため、横スクロールが必要になったり、横方向にはみ出してしまう事態は避けられます。

inline-blockが使えないブラウザは、もはや今となっては存在しないと考えて差し支えないでしょう。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---