diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-05 00:18:12 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-13 01:58:21 +0900 |
commit | c30862917dbd010ac7489941ef50592c9d2c6005 (patch) | |
tree | e3a6840d3ec1a72181d31cfb88d6dce26baf91b2 /files/ja/web/css/line-break/index.md | |
parent | f79037786b69a3dd1778d65cd3fbed97989b3a20 (diff) | |
download | translated-content-c30862917dbd010ac7489941ef50592c9d2c6005.tar.gz translated-content-c30862917dbd010ac7489941ef50592c9d2c6005.tar.bz2 translated-content-c30862917dbd010ac7489941ef50592c9d2c6005.zip |
CSS Textの文書の変換準備
Diffstat (limited to 'files/ja/web/css/line-break/index.md')
-rw-r--r-- | files/ja/web/css/line-break/index.md | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/files/ja/web/css/line-break/index.md b/files/ja/web/css/line-break/index.md new file mode 100644 index 0000000000..99fff450bd --- /dev/null +++ b/files/ja/web/css/line-break/index.md @@ -0,0 +1,114 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - Asian + - CSS + - CSS Property + - CSS Text + - NeedsExample + - Reference + - i18n + - l10n + - 'recipe:css-property' + - 日本語処理 + - 禁則処理 +translation_of: Web/CSS/line-break +--- +<div>{{CSSRef}}</div> + +<p><strong><code>line-break</code></strong> は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則を設定します。</p> + +<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +line-break: auto; +line-break: loose; +line-break: normal; +line-break: strict; +line-break: anywhere; + +/* グローバル値 */ +line-break: inherit; +line-break: initial; +line-break: unset; +</pre> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>既定の改行規則を使用してテキストを改行します。</dd> + <dt><code>loose</code></dt> + <dd>最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。</dd> + <dt><code>normal</code></dt> + <dd>最も一般的な改行規則を使用してテキストを改行します。</dd> + <dt><code>strict</code></dt> + <dd>最も厳格な改行規則を使用してテキストを改行します。</dd> + <dt><code>anywhere</code></dt> + <dd> + <p>句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。</p> + </dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +{{csssyntax}} + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_text_wrapping" name="Setting_text_wrapping">テキストの折り返しの設定</h3> + +<p>"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div lang="ja"> + <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } +.auto { line-break: auto; } +.loose { line-break: loose; } +.normal { line-break: normal; } +.strict { line-break: strict; } +.anywhere { line-break: anywhere; } +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("css.properties.line-break")}}</p> |