word-break: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
プロパティ
  • 独自拡張プロパティ

word-break は、テキストの折り返しが行われる際に、単語の途中で改行させるかどうかを指定するプロパティです。


p {
word-break: break-all;
}
プロパティ名 値 説明
word-break normal 標準 （英語は単語の区切りで改行、日本語は行末で改行）
break-all 行末で改行 （単語の途中であっても改行させる）
keep-all 単語の区切りで改行 （単語の途中では改行させない）

日本語の場合は、keep-all を指定した場合でも単語の区切りでは改行されません。（読点 、 で区切られるようです）

  • このプロパティは、CSS 2では定義されていません。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p {
width: 50%;
border: 1px #808080 solid;
}

p.example1 { word-break: normal; }
p.example2 { word-break: break-all; }
p.example3 { word-break: keep-all; }

</style>

</head>
<body>

<p class="example1">■normal<br>改行の仕方に関する、サンプルの ...</p>
<p class="example1">■normal<br>This text is an example of the ...</p>

<p class="example2">■break-all<br>改行の仕方に関する、サンプルの ...</p>
<p class="example2">■break-all<br>This text is an example of the ...</p>

<p class="example3">■keep-all<br>改行の仕方に関する、サンプルの ...</p>
<p class="example3">■keep-all<br>This text is an example of the ...</p>

</body>
</html>
表示例

■normal
改行の仕方に関する、サンプルの文章を書いてみます。ブラウザの幅を動かすと、それぞれの違いが分かりやすいです。

■normal
This text is an example of the word-break property. Move the width of a browser. Each difference will be able to be understood.

■break-all
改行の仕方に関する、サンプルの文章を書いてみます。ブラウザの幅を動かすと、それぞれの違いが分かりやすいです。

■break-all
This text is an example of the word-break property. Move the width of a browser. Each difference will be able to be understood.

■keep-all
改行の仕方に関する、サンプルの文章を書いてみます。ブラウザの幅を動かすと、それぞれの違いが分かりやすいです。

■keep-all
This text is an example of the word-break property. Move the width of a browser. Each difference will be able to be understood.