[css]文字オーバーフローを処理するスキーム

インテリジェントポイント
white-space、word-break、word-wrap
ブラウザのデフォルトの改行規則

.default{
  white-space:normal;
  word-wrap:normal;
  word-break:normal;
}

デフォルト:white-space:normalがデフォルトであるため、css仕様では自動改行が必要です.HTMLでは文字の長さが外枠を超えると自動的に改行されます.長い単語に出会ったら.ブラウザでは、長い単語をローに配置しようとしますが、テキストが超えている場合は、自動的に次のローに変更されます.改行しても超えてしまうと、溢れ出すしかありません.
word-wrapとword-breakの違い

まずword-break word-break属性規定自動改行の処理方法を見てみましょう.

属性値
説明
normal
ブラウザのデフォルトの改行規則を使用します.
break-all
単語内で改行を許可します.
keep-all
半角スペースまたはハイフンでのみ改行できます.
2.word-wrap word-wrapプロパティでは、長い単語やURLアドレスを次の行に改行できます.
属性値
説明
normal
許可されているブレークポイントでのみ改行します(ブラウザはデフォルトのままです).
break-word
長い単語またはURLアドレスの内部で改行します.
同じ点
いずれも単語内の改行と関係があります.実際、word-wrap:break-wordとword-break:break-allの共通点は、長い単語を強引に断句できることです.
異なる点
「違いはword-wrap:break-wordがまず新しい行を作って長い単語を置くことです.新しい行が置けないのか、この長い単語が置けないのか、長い単語を強制的に断句します.word-break:break-allは長い単語を新しい行に置くことはありません.この行が置けないときは直接断句を強制します」
ソリューション

は改行せず、オーバーフローは省略記号で表され、cssコードは以下の

である.

.ellipsis{  
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;/*   overflow:hidden,     */
}

自動改行+長単語内部改行、外層枠自動開.親要素に高さ制限がないことが必要です.

{
word-break：break-all;
}

参考文献

本当にword-wrapとword-breakの違いを知っていますか?

マルチテキストオーバーフロー表示省略記号(…)全攻略