overflow-wrap、word-wrap CSS3

overflow-wrap は、文字列などが指定された幅（行）からはみ出すのを防ぐために、通常なら改行が許されない場所で改行させるかどうかを指定する時に使います。 overflow-wrap と word-wrap 両方に同じ値を指定できます。

名前	:	overflow-wrap , word-wrap
値	:	normal \| break-word \|\| break-spaces
初期値	:	normal
適用対象	:	全ての要素
継承	:	する
パーセンテージ	:	n/a
メディア	:	visual（視覚的）
計算値	:	as specified（指定通り）
正規順序	:	n/a
アニメーション	:	discrete（離散的）

Value（値）

normal: 初期値単語の途中で改行しない CSS3
break-word: 区切る場所がない文字列（長いURLなど）は、指定された幅（行）に好ましい改行場所がない場合、任意の場所で区切（改行）られる。
形成文字（あたかも単語が改行していないように形成されている文字）の Grapheme Cluster（書記素クラスタ）は、１つの単位としてまとまっていなければならない。ハイフネーション（-）は改行場所に挿入されない。CSS3
break-spaces: 改行は通常のように処理される。
正し、指定された幅（行）を超えるスペースのシーケンス（空白の連続）は、その幅に収まる最後の空白文字後に、または、収まらない場合はシーケンス内の最初の空白後に改行されなければならない。または、収まらない場合はシーケンス内の最初のスペース前に break-word と break-spaces の両方が指定される。 CSS3

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 {
	   overflow-wrap: normal;
	   word-wrap: normal;
   }
   p.test2 {
	   overflow-wrap: break-word;
	   word-wrap: break-word;
   }
   p.test3 {
	   overflow-wrap: break-spaces;
	   word-wrap: break-spaces;
   }
  </style>
 </head>
 <body>
   <p class="test1">（文章）</p>
   <p class="test2">（文章）</p>
   <p class="test3">（文章）</p>
 </body>
</html>

display

http://***.jp/***/***.html あいうえおかきくけこさしすせそ。