文字がはみ出してグラグラするときの解決方法word-wrap: break-word;でも無理なときword-breakをチェック！

カスタマイズ

2016.05.18

スマホでブログを見ると、文字がはみ出し横揺れを起こしてグラグラ。Chromeでは収まってるのに、IEやFirefoxブラウザで、はみ出してることなどありますよね。

word-wrap: break-word;を入れても、長い単語ならはみ出てしまう箇所があったり…。その原因がわかったので、Chrome、Firefox、IE、Safariの幅を320pxに縮めてWindows7の環境でブラウザの改行点の違いを調べました。

ほか横揺れを起こす原因は、画像YouTubeブログカード、テーブル表のwidth幅が画面より大きい場合です。レスポンシブなら大半の場合max-width:100%;で解決します。

文字、テキストの改行を指定するCSS、word-wrap: break-word;それでもはみ出るときに使えるword-breakのこと。親テーマと子テーマのセレクタの指定方法でエラーを出すブラウザがあるかも知れないと数日、頭を悩ませましたことを書いてます。

文字列の改行を単語の途中でもさせるword-wrap: break-word;
word-wrap: break-word;を指定しても横揺れする原因
1. 横揺れの原因1、プロパティword-break値keep-all
  1. word-breakの値normal、keep-all、break-allの違い
2. 横揺れの可能性、セレクタの付け方.hogeと.hoge aの違いはデバイスによってとらえ方が違うと感じる
display: inline-block;の相性と解決法！
まとめ
さいごに

文字列の改行を単語の途中でもさせるword-wrap: break-word;

ブログを書いてるとたまに単語が凄く長いものになってしまうことがあります。そんな時、テキストを折り返し改行を指定するプロパティがword-wrapの値、break-wordが単語の途中でもテキストを折り返し改行するので便利です。

初期値はnormal長い単語は折り返さない、break-wordは単語の途中でも折り返します。160pxのブロック要素divで囲んだ2つの違いを見てください。

word-wrap: normal;　通常折り返しが許可されている位置のみで改行

あなたは、ご存知ですか。Honorificabilitudinitatibusという単語がある事。わたしは全く知りませんでした。メリーポピンズでお馴染みのsupercalifragilisticexpialidociousは、dvdを見たことある人ならお馴染みの単語ですけどね。

word-wrap: break-word;　長い単語の途中でも改行する（折り返す指定）

上記をみると初期値は、1つの長い単語の文字列は改行されないので、画面（div）内に収まらずグラグラ横揺れを起こした状態です。そんなとき、1つの長い単語の途中でも改行を指定する『word-wrap: break-word;』が有効になります！

ポイント

CSS3の仕様案でword-wrapをoverflow-wrapとして提案されてます。ブラウザによって、overflow-wrapはまだ対応してないブラウザがあるのでoverflow-wrapを指定時、word-wrapも併記をおススメしてるようです。

このページを書くのにかなり参考にさせてもらった本とページは下記です。

できるポケット HTML5&CSS3/2.1全事典できるポケットシリーズ

posted with カエレバ

小川裕子,加藤善規,できるシリーズ編集部インプレス 2015-03-06

Amazonで探す

楽天市場で探す

参考word-wrap･･･単語の途中で改行するかどうかを指定する（IEがCSS3の草案を先行採用）｜クイックリファレンス

ただ、それでもはみ出て横揺れを起こす場合があって、何で横揺れを起こすのかが謎で数日かけて調べてみました。原因は次にかきますね。

word-wrap: break-word;を指定しても横揺れする原因

幅に合わせて長い単語を途中で改行するプロパティ『word-wrap』に、値『break-word』を指定しても横揺れしてしまう原因は、別のプロパティの指定があったからでした。

テーマに『word-break: keep-all;』の記載があれば、状況によりブラウザ画面からはみ出しグラグラ横揺れをおこします。それを『word-break: break-all;』に変えてあげれば解決します。他に原因はいくつかあったので順番に説明しますね。

横揺れの原因1、プロパティword-break値keep-all

プロパティword-breakは、文章の改行方法を指定しています。値keep-allは、日本語、中国、韓国語の単語の途中で改行しないという指定です。

ポイント

テキストの文字の改行点をあらわすword-wrapとword-breakの違い

word-wrap: （改行方法）;は英文字など単語の途中の改行指定
word-break: （改行方法）;は日本語など文章や長い英単語の改行指定

word-wrap: break-word;は、長い文字列の英単語もあり返す設定になります。改行の禁止をしてない状況に、日本語の文や英単語の途中で改行しない設定word-break: keep-all;があると改行されず横揺れを起こします。

word-breakの他の値と比較してもう少しみると解りやすいので、次見てください。

word-breakの値normal、keep-all、break-allの違い

プロパティword-breakの値のうち5種類のうち3種類は、下記の通りです。

normal；改行方法の指定なし（初期値）
keep-all；日本語、中国、韓国語の単語の途中で改行しない
break-all；必要に応じて改行

クイックリファレンスのCSS3リファレンス｜word-break …… 行の改行方法を指定するより他2種類をご確認ください。またこちらの説明を参考にword-break: keep-all;と、normal、break-allの違いを再現してみますね。

※サンプル文章は、幅に応じて文字の改行をするword-break: break-all;を指定。

サンプル文章

この世で一番美しい人はだあれ。それは画面を見ているあなた！が読んでるこの文を書いた人よ。ごめんなさい、言い過ぎました！ joudandesukara 123456789123

下の段落pは、幅を88pxに設定し背景を付けて、単語の途中で折り返すword-wrapは初期値に設定。背景よりはみ出した部分がグラグラ横揺れになる環境を作ってます。

word-break: keep-all;

左側はnormal、右側はbreak-all

このように目で見ると違いが解りやすいのではないでしょうか。※ブラウザの関係上、細かく半角スペースで改行点を与えてます。グラツキのご指摘頂いた方、ごもっともです！グラグラ解決の為、keep-allの説明を理解してもらえたら感謝します♪

ポイント

normal；英数字などはみ出しグラグラの原因になる
keep-all；日本語などの文章、英文字などの単語や文字列、数字の改行は途中で行なわない。
break-all；どの場合も幅に合わせて改行を行なう

以降は、デバイスによって変わってくるのではないかと思うほかありません。

横揺れの可能性、セレクタの付け方.hogeと.hoge aの違いはデバイスによってとらえ方が違うと感じる

親要素『.hoge』にword-break: keep-all;の値があるのに、子要素の『.hoge a』word-break: break-all;をしてたんです。

それに気付かず長い文字列の『テーマの編集テンプレート○○.php関連』というタグの部分、iOSのSafariでは下記のようにはみ出して表示されてました。

@kautakku はみ出てる(´･ω･`) pic.twitter.com/pHhmYabbWW

— さかのうえのまろ (@sakanoueno_maro) 2016年5月11日

Chromeの要素の検証デバイスモードではキチンとハマって横揺れしてない状態でした。

@sakanoueno_maro しまったーー！！
自分の環境のみ対応させてた
ベンダープレフィックスで効くか試してみます(´･ω･`) pic.twitter.com/ZctCRtquqU

— かうたっく＠ホゲホゲ❦ (@kautakku) 2016年5月11日

IPhoneでは、word-break: break-all;が何故か反映しないようです。。Windows7にSafariのブラウザをダウンロードして調べたら折り返してるけど、IE、Firefoxでも反映せずグラグラ横揺れを起こした状態。

同じSafariでも、スマホとPCの幅を狭くしたものはハマってる…。

文字列の改行を単語の途中でもさせる『word-wrap: break-word;』を全ての要素に設定すればiOSにもグラグラ横揺れすることなく、折り返して一旦解決しました！

* {
	word-wrap: break-word;
}

でも、どうも腑に落ちない。

ブラウザやデバイスによって細かい改行点が違う。
セレクタの指定方法『.hoge』『.hoge a』でブラウザやデバイスによって、とらえ方がかわってくる可能性もある。

私が現在使ってるGush4のテーマの構造を説明した方が早いので説明しますね。ページ部分の.article-innerの中に、section本文記事、カテゴリとタグを表示する要素divクラスcat_tagがあります。

Gush4の構造

divクラスcat_tagの中には、spanで囲まれたカテゴリリンク<a>と、タグのリンク<a>が入ってるんですね。親テーマのセレクタは.cat_tag画像の緑の範囲。それに気付かず子テーマに追記したセレクタは.cat_tag a青の範囲でした。

下記が指定したセレクタの違いになります。

親テーマと子テーマのセレクタの違い

親テーマは.cat_tag {word-break: keep-all;}。追記した子テーマは.cat_tag a {word-break: break-all;}追記した方の指定が強いのか。追記した方が優先順位的に強いのになぜブラウザによって反映されない事があるのか。

この違いは結果的にブラウザによる、セレクタの微妙なとらえ方が違ってるのが特徴的でした。

word-break: keep-all;のブラウザごとのとらえ方

日本語の長い一文の折り返しの違いを見れば、IEとFirefoxは、忠実にkeep-allを表現していると解ります。一方、SafariとChromeはbreak-allの要素も多少引き継いでいるようにも感じます。下記の記載で解決されました。

* {
	word-wrap: break-word;
}

display: inline-block;の相性と解決法！

position: aboslute や display: inline-block との組み合わせ

ときとして長い単語が折り返されず、word-wrap: break-word が効いていないように思えるかもしれません。その単語の祖先要素に position: absolute や float: left、float: right、display: inline-block が指定されていると、このような状況が起こりえます。

引用元：長い英単語を途中で折り返したいときのccsの指定方法

長い英単語を途中で折り返したいときのccsの指定方法

上記引用の通り、word-wrap: break-word;が反映しないとき、display: inline-blockが指定されてる状態では起こりうるとの事です。子テーマに.cat_tag aを指定してしまったんですけど、親にはdisplay: inline-block;が入ってます。

.cat_tag a {
	color: #666;
	background-color: #fff;
	margin: 0 0.2em 0.5em 0;
	padding: 0.5em;
	border-radius: 5px;
	text-decoration: none;
	display: inline-block;
	border: 1px solid #888;
}

word-break: break-all;にも、少なからず関係している可能性もあるかも！？しれませんね・・・、解りませんが。親要素の.article-innerにwidthの指定%でされてるし、、謎です。

.article-inner {
	width: 95%;
	margin: 0 auto;
}
.article-inner div {
	max-width: 100%;
}

親テーマのword-break: keep-all;が入ってるセレクタのみをword-break: break-all;にかえると、他の要素は単語ごとに折り返し、それでも見切れるものは、word-break: break-all;で強制的に折り返すことで、グラグラするのがなくなります。

.cat_tag {
	word-break: break-all;
}

解決法

親テーマなどにword-break: keep-all;が入ってるか確認後、セレクタを一致させてword-break: break-all;を入れる。
word-wrap: break-word;よりも、word-break: break-all;のほうが強制改行が強い。
word-wrapの値『break-word』は改行強制してない値だから。

おまけ

* {word-wrap: break-word;
word-break: normal;}の指定を仮にしてみました。word-break: normalは、英数字などはみ出しグラグラの原因になる。改行点のとらえ方がブラウザごとに違う。

* {word-wrap: break-word; word-break: normal;}

タグ内の長い文字列の英文字が見切れてる（黄色部分）のがわかる。
word-wrap: break-word;が効いてない。
word-break: normalが効いて英数字などグラグラの原因に！
.cat_tag aは、display: inline-block;だから効かない可能性も！？
引用ピンク部分は、間逆でword-wrap: break-wordが効いて長い英文字が折り返してる！（width指定ありwidth: 85%）

* { word-wrap: break-word; word-break: normal; }本文中ははみださない

改行点はそれぞれ違いますが、赤字の改行点のない長い英数字はキチンとおりかえしてるのがわかります。

word-wrap: break-word;が効いてる
word-break: normal英数字などはみ出してないから効いてない。
ちなみに本文のsectionは、display: block;！

※迷子になってたらごめんなさい。参考になればいいですけど、、または詳しくわかる方、教えてください！

ただグラグラ原因は、これだけではありません。下記リンクを参考にしてくださいね。

LINKCSSでスマホ対応！画面からはみ出す、グラグラ横揺れする原因！画像YouTubeブログカード、テーブル表が見切れる時の対処法

LINK何で画像の枠がはみ出すの！？max-width:100%だけではダメ！そんなときの解決法

折り返し地点、改行点がブラウザによって全く変わってくるので、スペースを入れて改行点を作れるのであれば、作ってあげるのも手です。全てのデバイスやブラウザの仕様を理解するには、もっと経験や人の声が必要になってきそうですね。

まとめ

AppleのiOSの環境が解らず仮定、検証をくり返すうち1週間で腑に落ちる原因がわかってきました。デバイスやブラウザごとの改行点の違いもあるけど、CSSの反映のしかたも関係することがわかりました。

word-wrapの改行のしかたはブラウザ、デバイスごとの環境によってちょっと変わる
display: inline-blockが入ってると、ユーザーの環境により挙動が変わる
word-wrap: break-wordは、長い文字列の英単語もあり返す設定。改行の禁止をしてない状況

word-break: keep-allは、日本語の文や英単語の途中で改行しないから読みやすい。反面、文や英単語が長い過ぎると横揺れを起こす
word-break: keep-allの値があれば『セレクタを一致させ』break-allを追記してword-wrap: break-wordを入れたら直った
word-break: break-allもdisplay: inline-blockが入ってると、ユーザーの環境により挙動が変わると思うほかない状況（セレクタも一致させた方が安心）