From 4ace0769da3bc823dd8a3d86211cefa850ce3007 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 5 Oct 2021 01:44:43 +0900 Subject: CSS Text モジュールの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 - Web/CSS/CSS_Text/Wrapping_Text を新規翻訳 --- files/ja/web/css/word-break/index.md | 140 ++++++++++++++++------------------- 1 file changed, 62 insertions(+), 78 deletions(-) (limited to 'files/ja/web/css/word-break') diff --git a/files/ja/web/css/word-break/index.md b/files/ja/web/css/word-break/index.md index a315d8dd4a..2dd56cc203 100644 --- a/files/ja/web/css/word-break/index.md +++ b/files/ja/web/css/word-break/index.md @@ -3,23 +3,25 @@ title: word-break slug: Web/CSS/word-break tags: - CSS - - CSS テキスト - CSS プロパティ - Reference + - break-word + - recipe:css-property + - word-break - 日本語処理 +browser-compat: css.properties.word-break translation_of: Web/CSS/word-break --- -
{{CSSRef}}
+{{CSSRef}} -

word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

+**`word-break`** は [CSS](/ja/docs/Web/CSS) のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。 -
{{EmbedInteractiveExample("pages/css/word-break.html")}}
+{{EmbedInteractiveExample("pages/css/word-break.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 word-break: normal;
 word-break: break-all;
 word-break: keep-all;
@@ -28,64 +30,63 @@ word-break: break-word; /* 非推奨 */
 /* グローバル値 */
 word-break: inherit;
 word-break: initial;
+word-break: revert;
 word-break: unset;
-
- -

word-break プロパティは、下記のリストの中から 1 つを選んで指定します。

- -

値

- -
-
normal
-
既定の改行規則を使用します。
-
break-all
-
CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。 - -
-
keep-all
-
CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
-
break-word {{Deprecated_Inline}}
-
{{cssxref("overflow-wrap")}} プロパティの値とは関係なく、 word-break: normal や overflow-wrap: anywhere と同じ効果になります。
-
- -
-

メモ: word-break: break-word および overflow-wrap: break-word ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 word-break: break-all はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。

-
- -

形式文法

+``` + +`word-break` プロパティは、下記のリストの中から 1 つを選んで指定します。 + +### 値 + +- `normal` + - : 既定の改行規則を使用します。 +- `break-all` + - : CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。 +- `keep-all` + - : CJK テキストの改行を許可しません。 CJK 以外のテキストについては `normal` と同じ挙動となります。 +- `break-word` {{Deprecated_Inline}} + - : {{cssxref("overflow-wrap")}} プロパティの値とは関係なく、 `word-break: normal` や `overflow-wrap: anywhere` と同じ効果になります。 + +> **Note:** `word-break: break-word` および `overflow-wrap: break-word` ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 `word-break: break-all` はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+

例

-

HTML

+### HTML -
<p>1. <code>word-break: normal</code></p>
-<p class="normal narrow">This is a long and
+```html
+
1. word-break: normal

+
This is a long and
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

 
-<p>2. <code>word-break: break-all</code></p>
-<p class="breakAll narrow">This is a long and
+
2. word-break: break-all

+
This is a long and
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

 
-<p>3. <code>word-break: keep-all</code></p>
-<p class="keepAll narrow">This is a long and
+
3. word-break: keep-all

+
This is a long and
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

 
-<p>4. <code>word-break: break-word</code></p>
-<p class="breakWord narrow">This is a long and
+
4. word-break: break-word

+
This is a long and
   Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

+``` -

CSS

+### CSS -
.narrow {
+```css
+.narrow {
   padding: 10px;
   border: 1px solid;
   width: 500px;
@@ -110,37 +111,20 @@ word-break: unset;
 .breakWord {
   word-break: break-word;
 }
-
- -

{{EmbedLiveSample('Examples', '100%', 600)}}

+``` -

仕様書

+{{EmbedLiveSample('Examples', '100%', 600)}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}{{Spec2('CSS3 Text')}}初回定義
+## 仕様書 -
{{cssinfo}}
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.word-break")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("overflow-wrap")}} +- {{cssxref("hyphens")}} +- [テキストの分割と折り返しのガイド](/ja/docs/Web/CSS/CSS_Text/Wrapping_Text) -- cgit v1.2.3-54-g00ecf