From 0ed7c371f7ff103e19b2474e8a55c02d77e3c74d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 16 Oct 2021 23:48:25 +0900 Subject: CSS 基本ユーザーインターフェイスの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/15 時点の英語版に同期 --- files/ja/web/css/text-overflow/index.md | 441 +++++++++++++------------------- 1 file changed, 173 insertions(+), 268 deletions(-) (limited to 'files/ja/web/css/text-overflow') diff --git a/files/ja/web/css/text-overflow/index.md b/files/ja/web/css/text-overflow/index.md index 9462e33e6a..e0be9b14e4 100644 --- a/files/ja/web/css/text-overflow/index.md +++ b/files/ja/web/css/text-overflow/index.md @@ -4,79 +4,114 @@ slug: Web/CSS/text-overflow tags: - CSS - CSS プロパティ - - CSS 基本ユーザーインターフェイス - Reference + - recipe:css-property +browser-compat: css.properties.text-overflow translation_of: Web/CSS/text-overflow --- -

{{CSSRef}}

+{{CSSRef}} -

text-overflow は CSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('…') を表示するか、独自の文字列を表示するかです。

+**`text-overflow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('`…`') を表示するか、独自の文字列を表示するかです。 -
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
+{{EmbedInteractiveExample("pages/css/text-overflow.html")}} - +`text-overflow` プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。 -

text-overflow プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。

+```css +overflow: hidden; +white-space: nowrap; +``` -
overflow: hidden;
-white-space: nowrap;
+`text-overflow` プロパティは、*インライン*の進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。 -

text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。

+## 構文 -

構文

+`text-overflow` プロパティは、1 つまたは 2 つの値を使用して指定することができます。1 つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。2 つの値が指定された場合は、最初の値が行の左端、2 番目の値が行の右端のあふれの動作を指定します。 -

text-overflow プロパティは、一つまたは二つの値を使用して指定することができます。一つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。二つの値が指定された場合は、最初の値が行の左端、二番目の値が行の右端のあふれの動作を指定します。

+```css +text-overflow: clip; +text-overflow: ellipsis ellipsis; +text-overflow: ellipsis " [..]"; -

それぞれの値は以下のうちの一つです。

+/* グローバル値 */ +text-overflow: inherit; +text-overflow: initial; +text-overflow: revert; +text-overflow: unset; +``` - +- キーワード値 `clip`, `ellipsis`, `fade` のうちの一つ +- フェードの長さを制御するための `fade()` 関数に {{cssxref("<length>")}} または {{cssxref("<percentage>")}} が渡されたもの +- `` -

値

+### 値 -
-
clip
-
このプロパティの既定値です。このキーワード値はコンテンツ領域の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが text-overflow の空文字列に対応していれば、 text-overflow: ''; を指定することができます。
-
ellipsis
-
このキーワード値は、切り取られたテキストを表現するために省略記号 ('…', U+2026 Horizontal Ellipsis) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。
-
<string> {{experimental_inline}}
-
クリップされたテキストを表すために使われる {{cssxref("<string>")}} です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。
-
fade {{experimental_inline}}
-
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
-
fade( <length> | <percentage> ) {{experimental_inline}}
-
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
-
引数はフェード効果が適用される範囲を指定します。 {{cssxref("<percentage>")}} は行ボックスの幅に対する割合になります。 0 よりも小さい値は 0 に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。
-
+- `clip` + - : このプロパティの既定値です。このキーワード値は[コンテンツ領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが `text-overflow` の空文字列に対応していれば、 `text-overflow: '';` を指定することができます。 +- `ellipsis` + - : このキーワード値は、切り取られたテキストを表現するために省略記号 (`'…'`, `U+2026 HORIZONTAL ELLIPSIS`) を表示します。省略記号は[コンテンツ領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。 +- `` {{experimental_inline}} + - : クリップされたテキストを表すために使われる {{cssxref("<string>")}} です。この文字列は[コンテンツ領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。 +- `fade` {{experimental_inline}} + - : このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。 +- `fade( | )` {{experimental_inline}} -

公式定義

+ - : このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。 -

{{CSSInfo}}

+ 引数はフェード効果が適用される範囲を指定します。 {{cssxref("<percentage>")}} は行ボックスの幅に対する割合になります。 `0` よりも小さい値は `0` に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。 -

形式文法

+## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

値 1 つの構文

+ +この例は、様々な `text-overflow` の値が段落に適用された例を、左書きと右書きのテキストで示します。 + +#### HTML + +```html + +
+

Left to right text

+ 
clip
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+ 
ellipsis
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+ 
" [..]"
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
-

CSS

+
+

Right to left text

+ 
clip
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+ 
ellipsis
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+ 
" [..]"
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+``` -
p {
+#### CSS
+
+```css
+p {
   width: 200px;
   border: 1px solid;
   padding: 2px 5px;
 
-  /* BOTH of the following are required for text-overflow */
+  /* Both of the following are required for text-overflow */
   white-space: nowrap;
   overflow: hidden;
 }
 
-.overflow-visible {
-  white-space: initial;
-}
-
 .overflow-clip {
   text-overflow: clip;
 }
@@ -86,231 +121,101 @@ white-space: nowrap;
} .overflow-string { - /* Not supported in most browsers, - see the 'Browser compatibility' section below */ text-overflow: " [..]"; } - - -

HTML

- -
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-
- -

結果

- -

{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}

- -

注: 以下の表の「実際の結果」は、 MDN エディターが文字列値の text-overflow プロパティを持つ style 属性の中身をすべて削除するという制限があるため、正しく表示されないことがあります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CSS valuedirection: ltrdirection: rtl
期待される結果実際の結果期待される結果実際の結果
visible overflow1234567890 -
1234567890
- 		0987654321 -
1234567890
-
text-overflow: clipt-o_clip.png -
1234567890
- 		t-o_clip_rtl.png -
1234567890
-
text-overflow: ''12345 -
1234567890
- 		54321 -
1234567890
-
text-overflow: ellipsis1234… -
1234567890
- 		…4321 -
1234567890
-
text-overflow: '.'1234. -
1234567890
- 		.4321 -
1234567890
-
text-overflow: clip clip123456 -
1234567890
- 		654321 -
1234567890
-
text-overflow: clip ellipsis1234… -
1234567890
- 		6543… -
1234567890
-
text-overflow: clip '.'1234. -
1234567890
- 		6543. -
1234567890
-
text-overflow: ellipsis clip…3456 -
1234567890
- 		…4321 -
1234567890
-
text-overflow: ellipsis ellipsis…34… -
1234567890
- 		…43… -
1234567890
-
text-overflow: ellipsis '.'…34. -
1234567890
- 		…43. -
1234567890
-
text-overflow: ',' clip,3456 -
1234567890
- 		,4321 -
1234567890
-
text-overflow: ',' ellipsis,34… -
1234567890
- 		,43… -
1234567890
-
text-overflow: ',' '.',34. -
1234567890
- 		,43. -
1234567890
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
CSS Overflow Module Level 4<string> および fade の値と fade() 関数を追加
{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 Overflow')}}初回定義
- -

以前の版のこのインターフェイスは 勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は "草案" レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。

- -

ブラウザーの互換性

- -

{{Compat("css.properties.text-overflow")}}

- -

関連情報

- -
    -
  • 関連 CSS プロパティ: {{cssxref("overflow")}}, {{cssxref("white-space")}}
    • -
  • 単語の改行を制御する CSS プロパティ: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}
    • -
+ +body { + display: flex; + justify-content: space-around; +} + +.ltr > p { + direction: ltr; +} + +.rtl > p { + direction: rtl; +} +``` + +#### 結果 + +{{EmbedLiveSample('One-value_syntax', 600, 320)}} + +

値 2 つの構文

+ +この例は `text-overflow` の値 2 つの構文を表し、テキストの先頭と末尾の様々なあふれの動作を表しています。 +効果を見るには、スクロールをして行頭を隠すようにする必要があります。 + +#### HTML + +```html +
clip clip
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
clip ellipsis
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
ellipsis ellipsis
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
ellipsis " [..]"
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+``` + +#### CSS + +```css +p { + width: 200px; + border: 1px solid; + padding: 2px 5px; + + /* 以下のどちらも text-overflow に必要です */ + white-space: nowrap; + overflow: scroll; +} + +.overflow-clip-clip { + text-overflow: clip clip; +} + +.overflow-clip-ellipsis { + text-overflow: clip ellipsis; +} + +.overflow-ellipsis-ellipsis { + text-overflow: ellipsis ellipsis; +} + +.overflow-ellipsis-string { + text-overflow: ellipsis " [..]"; +} +``` + +#### JavaScript + +```js +// それぞれの段落をスクロールされ、行頭が隠れるようにします +const paras = document.querySelectorAll("p"); + +for (let para of paras) { + para.scroll(100, 0); +} +``` + +#### 結果 + +{{EmbedLiveSample('Two-value_syntax', 600, 360)}} + +## 仕様書 + +{{Specifications}} + +以前の版のこのインターフェイスは *勧告候補* に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は *草案* レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連 CSS プロパティ: {{cssxref("overflow")}}, {{cssxref("white-space")}} +- 単語の改行を制御する CSS プロパティ: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} -- cgit v1.2.3-54-g00ecf