WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「自動改行のルール」「単語の改行ルール」

word-wrap,overflow-wrap,word-break「単語の改行指定」

単語での改行指定は「word-wrap」「overflow-wrap」「word-break」を指定します。
「word-wrap」(IE用)=「overflow-wrap」です。
「overflow-wrap」と「word-break」は微妙に違いますので下記サンプルをご確認ください。

CSS Ver.適用要素継承
2.1,3.0全要素しない
広告

改行指定の指定方法

構文

overflow-wrap : normal | break;

word-wrap : normal | break;

word-break : break-word | break-all | loose | break-strict | keep-all;

プロパティ/設定値意味
overflow-wrap : normal;
overflow-wrap : break;
枠(ブロック)をはみ出しても単語を優先
デフォルト:「タグ毎のスタイル初期値」を参照
word-wrap : normal;
word-wrap : break;
「overflow-wrap」と同じ(IE用)
デフォルト:「タグ毎のスタイル初期値」を参照
word-break : break-word;
word-break : break-all;
word-break : loose;
word-break : break-strict;
word-break : keep-all;
単語より枠(ブロック)を優先
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

改行指定のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_word_wrap_normal{
  word-wrap      : normal;      /* IE */
  overflow-wrap : normal;
}
.css_word_wrap_break{
  word-wrap      : break;       /* IE */
  overflow-wrap : break;
}
.css_word_break_normal{
  word-break  : break-word;
}
.css_word_break_break_all{
  word-break  : break-all;
}
.css_word_break_loose{
  word-break  : loose;
}
.css_word_break_break_strict{
  word-break  : break-strict;
}
.css_word_break_keep_all{
  word-break  : keep-all;
}

<!-- html -->
<div class="common">
  <div class="cssTitle">overflow-wrap : normal;</div>
  <div class="css_word_wrap_normal">
  アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
  </div>

  <div class="cssTitle">overflow-wrap : break;</div>
  <div class="css_word_wrap_break">
  アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
  </div>

  <div class="cssTitle">word-break : break-word;</div>
  <div class="css_word_break_normal">
  アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
  </div>

  <div class="cssTitle">word-break : break-all;</div>
  <div class="css_word_break_break_all">
  アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
  </div>

  <div class="cssTitle">word-break : loose;</div>
  <div class="css_word_break_loose">
  アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
  </div>

  <div class="cssTitle">word-break : break-strict;</div>
  <div class="css_word_break_break_strict">
  アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
  </div>

  <div class="cssTitle">word-break : keep-all;</div>
  <div class="css_word_break_keep_all">
  アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
  </div>
</div>
overflow-wrap : normal;
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
overflow-wrap : break;
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
word-break : break-word;
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
word-break : break-all;
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
word-break : loose;
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
word-break : break-strict;
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
word-break : keep-all;
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。


ブラウザで一部異なるため注意が必要です。

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン