From bd08bf1e4887e1f3900e2b18f434cb0b05977972 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 7 Jun 2021 01:47:51 +0900 Subject: 20210607-Web/CSS/-webkit-line-clamp MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/08 時点の英語版に同期 --- files/ja/web/css/-webkit-line-clamp/index.html | 65 +++++++++++++++----------- 1 file changed, 37 insertions(+), 28 deletions(-) diff --git a/files/ja/web/css/-webkit-line-clamp/index.html b/files/ja/web/css/-webkit-line-clamp/index.html index 8e52755eff..fee9ec1687 100644 --- a/files/ja/web/css/-webkit-line-clamp/index.html +++ b/files/ja/web/css/-webkit-line-clamp/index.html @@ -5,32 +5,35 @@ tags: - '-webkit-line-clamp' - CSS - CSS Property + - Non-standard + - recipe:css-property +browser-compat: css.properties.-webkit-line-clamp translation_of: Web/CSS/-webkit-line-clamp ---
{{CSSRef}}
-

-webkit-line-clamp CSS プロパティは {{Glossary("block container")}} のコンテンツを指定した行数に制限することができます。

+

-webkit-line-clamp は CSS のプロパティで、{{Glossary("block container", "ブロックコンテナー")}}のコンテンツを指定した行数に制限することができます。

-

{{cssxref("display")}} プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ {{cssxref("-webkit-box-orient")}} プロパティに vertical が設定されている組み合わせのときのみ使用できます。

+

{{cssxref("display")}} プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ {{cssxref("box-orient")}} プロパティに vertical が設定されている組み合わせのときのみ使用できます。

ほとんどの場合、 {{cssxref("overflow")}} に hidden を設定できます。そうしなければコンテンツはクリップされませんが、省略記号は指定した行数の後に表示されます。

アンカー要素に適用したとき、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。

-
-

メモ: このプロパティは元々WebKitブラウザでは実装されていますが、いくつかの問題があります。レガシーサポートのために標準化されました。CSS Overflow Module Level 3 の仕様では、このプロパティを置き換えて問題を回避することを目的として {{cssxref("line-clamp")}} プロパティが定義されています。

+
+

メモ: このプロパティは元々 WebKit ブラウザでは実装されていますが、いくつかの問題があります。レガシーサポートのために標準化されました。 CSS Overflow Module Level 3 の仕様では、このプロパティを置き換えて問題を回避することを目的として {{cssxref("line-clamp")}} プロパティが定義されています。

-

文法

+

構文

-
/* Keyword value */
+
/* キーワード値 */
 -webkit-line-clamp: none;
 
-/* <integer> values */
+/* <integer> 値 */
 -webkit-line-clamp: 3;
 -webkit-line-clamp: 10;
 
-/* Global values */
+/* グローバル値 */
 -webkit-line-clamp: inherit;
 -webkit-line-clamp: initial;
 -webkit-line-clamp: unset;
@@ -40,21 +43,31 @@ translation_of: Web/CSS/-webkit-line-clamp
  
none

  
コンテンツの行数を制限しません。

  
{{cssxref("integer")}}

- 
コンテンツを制限する行数を指定します。0より大きい値でなければなりません。

+ 
コンテンツを制限する行数を指定します。 0 より大きい値でなければなりません。

 
 
-
例

+
公式定義

 
-
HTML

+
{{CSSInfo}}

 
-
<p>
+
形式文法

+
+{{CSSSyntax}}
+
+
例

+
+
段落の切り捨て

+
+
HTML

+
+
<p>
   In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
   An ellipsis will be shown at the point where the text is clamped.
 </p>

 
-
CSS

+
CSS

 
-
p {
+
p {
   width: 300px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -62,38 +75,34 @@ translation_of: Web/CSS/-webkit-line-clamp
   overflow: hidden;
 }

 
-
Result

+
結果

 
-
{{EmbedLiveSample("例", "100%", "100")}}

+
{{EmbedLiveSample("Truncating_a_paragraph", "100%", "100")}}

 
-
仕様書

+
仕様書

 
 
-   
-   
-   
+   
+   
+   
-   
+   

  
   
SpecificationStatusComment仕様書状態備考
   

  
  
   

    {{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}
    {{Spec2("CSS3 Overflow")}}Initial definition初回定義
   

  
 

 
-
{{cssinfo}}

-
-
ブラウザ互換性

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

 
-
{{Compat("css.properties.-webkit-line-clamp")}}

+
{{Compat}}

 
-
関連情報

+
関連情報