From d54b0e0f0a7aa80f4bb20fbdab8ee03a381c4ea2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:38:00 +0900 Subject: .html を .md に改名 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/text-overflow/index.html | 316 ------------------------------ files/ja/web/css/text-overflow/index.md | 316 ++++++++++++++++++++++++++++++ 2 files changed, 316 insertions(+), 316 deletions(-) delete mode 100644 files/ja/web/css/text-overflow/index.html create mode 100644 files/ja/web/css/text-overflow/index.md (limited to 'files/ja/web/css/text-overflow') diff --git a/files/ja/web/css/text-overflow/index.html b/files/ja/web/css/text-overflow/index.html deleted file mode 100644 index 9462e33e6a..0000000000 --- a/files/ja/web/css/text-overflow/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: text-overflow -slug: Web/CSS/text-overflow -tags: - - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - Reference -translation_of: Web/CSS/text-overflow ---- -

{{CSSRef}}

- -

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

- -
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
- - - -

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

- -
overflow: hidden;
-white-space: nowrap;
- -

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

- -

構文

- -

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

- -

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

- - - -

値

- -
-
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 に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
p {
-  width: 200px;
-  border: 1px solid;
-  padding: 2px 5px;
-
-  /* BOTH of the following are required for text-overflow */
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.overflow-visible {
-  white-space: initial;
-}
-
-.overflow-clip {
-  text-overflow: clip;
-}
-
-.overflow-ellipsis {
-  text-overflow: ellipsis;
-}
-
-.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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/text-overflow/index.md b/files/ja/web/css/text-overflow/index.md new file mode 100644 index 0000000000..9462e33e6a --- /dev/null +++ b/files/ja/web/css/text-overflow/index.md @@ -0,0 +1,316 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +tags: + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - Reference +translation_of: Web/CSS/text-overflow +--- +

{{CSSRef}}

+ +

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

+ +
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
+ + + +

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

+ +
overflow: hidden;
+white-space: nowrap;
+ +

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

+ +

構文

+ +

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

+ +

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

+ + + +

値

+ +
+
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 に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* BOTH of the following are required for text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.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")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf