iPentec.com  /  Doc  /  CSS

目次

必ず領域の幅で改行されるようにする / 長いASCII文字列の改行 - CSS

スタイルシートにてwidthプロパティを設定し枠の幅を設定したにもかかわらず、文字がワードラップされず枠をはみ出してしまう現象と対策方法を紹介します。

概要

スタイルシートで枠の幅を設定し、枠内のコンテンツに文字列を配置します。 通常の英文や日本語文であれば問題なく動作しますが、長い半角アルファベットの文字列(ASCII文字列)では改行されず、文字が枠をはみ出してしまいます。 この現象が発生した場合、スタイルシートのword-breakプロパティまたは、overflow-wrapプロパティを設定すると、改行の方式を変更できます。

意図しない動作となるコード例

ワードラップされない現象を再現します。

コード

以下のコードを記述します。
wraptest.css
.OuterFrame {
  margin-left:0px;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  border: solid 4px #0094ff;
}


.SimpleFrame {
  margin-top:16px;
  margin-left:16px;
  margin-bottom:16px;
  margin-right:16px;
  
  border:solid 1px #808080;
  width:200px;
}
wraptest.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="wraptest.css" />
</head>
<body>
    <div class="OuterFrame">
        <div class="SimpleFrame">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</div>

        <div class="SimpleFrame">あいうえおかきくけこさしすせそたちつてとなににぬねのはひふへほまみむめもやゆよらりるれろわをん</div>

        <div class="SimpleFrame">I awoke to a vision of a white ceiling above, The light streaming in through the window was so bright, It felt like being left behind in a world of pure white. A fleeting thought crossed my mind, Could this perhaps be heaven?</div>

        <div class="SimpleFrame">目を覚ました。白い天井が見える。窓から差し込む光はまぶしく、まるで純白の世界に取り残された錯覚を持った。刹那考えが脳裏をよぎる、もしやこれは天国か。</div>

    </div>
</body>
</html>

表示結果

上記のHTMLファイルを表示すると下図の表示結果となります。日本語文字列のほうは枠の幅で改行されていますが、 英文字列のほうは文字が枠をはみ出してしまっていることがわかります。

原因

ワードラップが行われず枠をはみ出している原因はword-wrapモードがデフォルトのみ指定状態では、"normal"に設定されているためです。 "normal"モードではワードラップは単語の途中で行われるため、切れ目のない文字列の場合ワードラップが行われず表示範囲が拡大されてしまいます。

対策

対策は以下があります。
  1. 単語を短くする
  2. overflow-wrapプロパティの設定を anywhere または break-word に設定する
  3. word-breakプロパティの設定を break-all または break-word に設定する

書式

overflow-wrapプロパティ

overflow-wrap:anywhere;
または
overflow-wrap:break-word;

word-breakプロパティ

word-break:break-all;
または
word-break:break-word;
補足
word-break, overflow-wrapプロパティの動作の詳細はこちらの記事を参照してください。

overflow-wrapプロパティを変更したコード例

コード

CSSファイルを以下のコードに変更します。
wraptest.css
.OuterFrame {
  margin-left:0px;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  border: solid 4px #0094ff;
}


.SimpleFrame {
  margin-top:16px;
  margin-left:16px;
  margin-bottom:16px;
  margin-right:16px;
  
  border:solid 1px #808080;
  width:200px;
  overflow-wrap: anywhere;
}

表示結果

上記のHTMLを表示すると、下図の表示結果となります。
ワードラップが行われ、英文字の長い単語も枠から文字がはみ出さずに描画できています。

word-breakプロパティを変更したコード例

コード

CSSファイルを以下のコードに変更します。
wraptest.css
.OuterFrame {
  margin-left:0px;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  border: solid 4px #0094ff;
}


.SimpleFrame {
  margin-top:16px;
  margin-left:16px;
  margin-bottom:16px;
  margin-right:16px;
  
  border:solid 1px #808080;
  width:200px;
  word-break:break-all;
}

表示結果

上記のHTMLを表示すると、下図の表示結果となります。
ワードラップが行われ、英文字の長い単語も枠から文字がはみ出さずに描画できています。


補足 : Internet Explorer の場合

Interenet Explorer での動作を紹介します。

ワードラップの設定をしない場合

ワードラップの設定をしない場合の表示を確認します。

コード

以下のコードを準備します。
wraptest.css
.OuterFrame {
  margin-left:0px;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  border: solid 4px #0094ff;
}


.SimpleFrame {
  margin-top:16px;
  margin-left:16px;
  margin-bottom:16px;
  margin-right:16px;
  
  border:solid 1px #808080;
  width:200px;
}
wraptest.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="wraptest.css" />
</head>
<body>
    <div class="OuterFrame">
        <div class="SimpleFrame">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</div>
    </div>

</body>
</html>

表示結果

上記のHTMLファイルをIntrernet Explorer 表示すると下図の表示結果となります。英文字の長い単語の場合、文字が枠をはみ出してしまっていることがわかります。

Internet Explorer での対処方法

Internet Explorer で長い英単語をワードラップさせる場合には、word-wrap プロパティを利用します。

書式

word-wrap:break-word;

対策コード

CSSファイルを下記に変更します。
wraptest.css
.OuterFrame {
  margin-left:0px;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  border: solid 4px #0094ff;
}

.SimpleFrame {
  margin-top:16px;
  margin-left:16px;
  margin-bottom:16px;
  margin-right:16px;
  
  border:solid 1px #808080;
  width:200px;

  word-wrap:break-word;
}

表示結果

上記のHTMLを表示すると、下図の表示結果となります。
ワードラップが行われ、枠から文字がはみ出さずに描画できています。


著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2013-01-08
改訂日: 2021-07-14
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.