CSS自動改行、強制不改行、強制断行、超過表示省略符

word-wrap: break-word; /*          ，      ，        */
white-space: normal; /*         */

word-break: break-all; /*              */

white-space: nowrap;  /*      */
overflow: hidden;  /*   X,Y    */
text-overflow: ellipsis;  /*        ...   */

word-wrap定義と使い方

word-wrapプロパティでは、長い単語またはURLアドレスを次の行に改行できます.
値
説明
normal
許可されているブレークポイントでのみ改行します(ブラウザはデフォルトのままです).
break-word
長い単語またはURLアドレスの内部で改行します.

 

white-space定義と使い方

white-spaceプロパティは、要素内の空白をどのように処理するかを設定します.
値
説明
normal
デフォルト.空白はブラウザに無視されます.
pre
空白はブラウザに保持されます.その動作はHTMLの

   。

に似ています
nowrap
テキストは改行されず、ラベルが表示されるまでテキストは同じ行に進みます.
pre-wrap
空白の文字列は保持されますが、通常は改行されます.
pre-line
空白のシーケンスをマージしますが、改行は保持されます.
inherit
親要素からwhite-space属性を継承すべき値を指定します.

 

word-break定義と使い方

word-breakプロパティは、自動改行の処理方法を規定します.

構文

word-break: normal|break-all|keep-all;

値
説明
normal
ブラウザのデフォルトの改行規則を使用します.
break-all
単語内で改行を許可します.
keep-all
半角スペースまたはハイフンでのみ改行できます.