チャット作成時に連続した記号がコンテンツ幅を越えてしまい詰まった件

ブログ

半角・全角に関わらず、連続した記号で要素がはみ出す現象が発生しました。

こんな時にはword-break: break-allとoverflow-wrap: break-wordが使えるそうですが、cssが効く場合とそうでない場合があるみたいなので調べました。

word-breakの使い方

word-break : 改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

word-break: break-all
表示範囲を超える長さの英数字の文字列、適当なスペースの入っている短い長い関係なく、どの文字でも、範囲に収まるように、単語の途中で自動改行されます。

※IEには現在対応してません。

word-break: normal; 
/* 既定の改行規則を使用します。 */

word-break: break-all;
/* CJK以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、
どの文字の間でも改行するようにします。 */

word-break: keep-all;
/* CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。 */

word-break: break-word; /* 非推奨 */
/*  word-break: normal や overflow-wrap: anywhere と同じ効果になります。 */

overflow-wrapの使い方

overflow-wrap (word-wrap) : インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用します。→表示範囲に収まらない長い連続する文字列を、途中で改行させるかどうか

overflow-wrap: normal;
/*通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行することを示します。*/

overflow-wrap: break-word;
/*単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。*/

overflow-wrap: anywhere;
/*あふれることを避けるために、行内にその他の分割可能な位置がない場合、
その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。
分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、
単語分割によって導入された折り返し可能位置が考慮されます。*/

word-break とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。↓↓単語の途中ではなくキリが良いところで改行されています。

overflow-wrap: break-word;
overflow-wrap: anywhere;

overflow-wrap: break-wordが効かない場合

1.幅がないもの

一般的な文章なら、overflow-wrap: break-word が一番利用しやすい感じがしますが、インライン要素のため「内容が定まるまで幅の決まらない要素」がある場合、効きません。

display: blockやflexなどで要素をブロックする。または幅(width)や最大幅(max-width)を明示する。

2.テーブル
テーブルの親要素(table-layout:auto)、子要素(display:table-cell)の場合、子要素に overflow-wrap: break-word を指定しても自動改行が無視されます。
→ 回避策 親要素に対して、固定レイアウトアルゴリズム table-layout:fixed を指定する。

またはword-break: break-word;を使う。

参考:
https://web.hazu.jp/overflow-wrap-word-break/

overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
はじめに 今回解決したいのはこれです。 「overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題」です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、ど...
タイトルとURLをコピーしました