From e5a4d695978302881f3251b45c61fee3f77e6afc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 2 Feb 2022 01:19:12 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/-webkit-line-clamp/index.md | 100 +++++++++++---------------- 1 file changed, 42 insertions(+), 58 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/-webkit-line-clamp/index.md b/files/ja/web/css/-webkit-line-clamp/index.md index fee9ec1687..9ac0ba9427 100644 --- a/files/ja/web/css/-webkit-line-clamp/index.md +++ b/files/ja/web/css/-webkit-line-clamp/index.md @@ -4,32 +4,31 @@ slug: Web/CSS/-webkit-line-clamp tags: - '-webkit-line-clamp' - CSS - - CSS Property - - Non-standard + - CSS プロパティ + - 標準外 - recipe:css-property browser-compat: css.properties.-webkit-line-clamp translation_of: Web/CSS/-webkit-line-clamp --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

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

+ほとんどの場合、 {{cssxref("overflow")}} に `hidden` を設定できます。そうしなければ内容は切り取られませんが、省略記号は指定した行数の後に表示されます。 -

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

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

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

-
+> **Note:** このプロパティは元々 WebKit ブラウザーで実装されていたものですが、いくつかの問題があります。レガシーサポートのために標準化されました。 [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) の仕様では、このプロパティを置き換えて問題を回避することを目的として {{cssxref("line-clamp")}} プロパティが定義されています。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 -webkit-line-clamp: none;
 
-/* <integer> 値 */
+/*  値 */
 -webkit-line-clamp: 3;
 -webkit-line-clamp: 10;
 
@@ -37,74 +36,59 @@ translation_of: Web/CSS/-webkit-line-clamp
 -webkit-line-clamp: inherit;
 -webkit-line-clamp: initial;
 -webkit-line-clamp: unset;
-
+``` -
-
none
-
コンテンツの行数を制限しません。
-
{{cssxref("integer")}}
-
コンテンツを制限する行数を指定します。 0 より大きい値でなければなりません。
-
+- `none` + - : コンテンツの行数を制限しません。 +- {{cssxref("integer")}} + - : コンテンツを制限する行数を指定します。 0 より大きい値でなければなりません。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

+## 形式文法 {{CSSSyntax}} -

例

+## 例 -

段落の切り捨て

+### 段落の切り捨て -

HTML

+#### 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.
+```html
+

+  In this example the -webkit-line-clamp property is set to 3, 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 {
+```css
+p {
   width: 300px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
-}
+} +``` -

結果

+#### 結果 -

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

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

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}{{Spec2("CSS3 Overflow")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

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

{{Compat}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) +- {{cssxref("line-clamp")}} -- cgit v1.2.3-54-g00ecf