TextEllipsis テキスト省略 - Vant 4

TextEllipsis 文章省略

紹介

📝 スマートテキスト省略コンポーネント - 長文の頼れる管理人！賢いエディタのように、長すぎるテキストを自動で処理し、上品な「…」で置き換えます。展開/折りたたみもサポートし、必要なときだけ全文を表示。UI を簡潔かつ実用的に保ちます。✨

💡 バージョン要件：このコンポーネントを使うには vant を >= 4.1.0 にアップグレードしてください。

取り込み

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

import { createApp } from'vue'; import { TextEllipsis } from'vant'; const app = createApp(); app.use(TextEllipsis);

コード例

基本的な使い方

📏 1 行省略表示 - デフォルトで 1 行を表示し、超過分は自動で「…」に置き換えます。長文に「マスク」を付けるように、美しさと省スペースを両立！

<template>
  <div class="demo-text-ellipsis">
    <van-text-ellipsis :content="text" />
  </div>
</template>

<script>
export default {
  setup() {
    const text = '焦らず、ゆっくり進もう。人生が投げかける難題にも、いつか必ず答えは訪れる。';
    
    return {
      text,
    };
  },
};
</script>

<style>
.demo-text-ellipsis {
  padding: 16px;
}
</style>

展開/折りたたみ

🔄 スマートな展開/折りたたみ - 行数制限を超えると自動で展開ボタンを表示。アコーディオンのように、全文表示と簡潔表示を自由に切り替えできます。

<template>
  <div class="demo-text-ellipsis">
    <van-text-ellipsis 
      :content="text" 
      expand-text="展開" 
      collapse-text="折りたたみ"
    />
  </div>
</template>

<script>
export default {
  setup() {
    const text = '流れる歳月こそ人のすべてであり、真に自分のものと言えるのはそれだけだ。その他は束の間の歓びも不幸も、瞬く間に時の流れへと消えていく。';
    
    return {
      text,
    };
  },
};
</script>

<style>
.demo-text-ellipsis {
  padding: 16px;
}
</style>

表示行数のカスタマイズ

📊 柔軟な行数制御 - rows 属性で表示行数を自由に設定。内容の重要度やレイアウトに合わせて最適な行数を選べます。

<template>
  <div class="demo-text-ellipsis">
    <van-text-ellipsis 
      :content="text" 
      :rows="3"
      expand-text="展開" 
      collapse-text="折りたたみ"
    />
  </div>
</template>

<script>
export default {
  setup() {
    const text = 'その日、私は二十一歳。人生の黄金期のただ中で、数々の望みを抱いていた。愛したい、食べたい、そして雲のように自由でありたいと。やがて人生はゆっくりと打たれていく過程だと知るが、その時の私は何にも挫けないと信じていた。';
    
    return {
      text,
    };
  },
};
</script>

<style>
.demo-text-ellipsis {
  padding: 16px;
}
</style>

省略位置のカスタマイズ

📍 正確な省略位置 - position で省略位置を制御。カット位置を選ぶように柔軟に設定できます。先頭・中間・末尾の 3 種類に対応。

先頭を省略

<template>
  <div class="demo-text-ellipsis">
    <van-text-ellipsis 
      :content="text" 
      :rows="2"
      position="start"
      expand-text="展開" 
      collapse-text="折りたたみ"
    />
  </div>
</template>

<script>
export default {
  setup() {
    const text = 'その日、私は二十一歳。人生の黄金期のただ中で、数々の望みを抱いていた。愛したい、食べたい、そして雲のように自由でありたいと。やがて人生はゆっくりと打たれていく過程だと知るが、その時の私は何にも挫けないと信じていた。';
    
    return {
      text,
    };
  },
};
</script>

<style>
.demo-text-ellipsis {
  padding: 16px;
}
</style>

中間を省略

<template>
  <div class="demo-text-ellipsis">
    <van-text-ellipsis 
      :content="text" 
      :rows="2"
      position="middle"
      expand-text="展開" 
      collapse-text="折りたたみ"
    />
  </div>
</template>

<script>
export default {
  setup() {
    const text = 'その日、私は二十一歳。人生の黄金期のただ中で、数々の望みを抱いていた。愛したい、食べたい、そして雲のように自由でありたいと。やがて人生はゆっくりと打たれていく過程だと知るが、その時の私は何にも挫けないと信じていた。';
    
    return {
      text,
    };
  },
};
</script>

<style>
.demo-text-ellipsis {
  padding: 16px;
}
</style>

操作内容のカスタマイズ

🎨 個性的な操作ボタン - action スロットで操作内容をカスタマイズ。アイコンやスタイル変更で、操作をより魅力的に。

<template>
  <div class="demo-text-ellipsis">
    <van-text-ellipsis :content="text" :rows="2">
      <template #action="{ expanded, toggle }">
        <van-button 
          type="primary" 
          size="mini" 
          @click="toggle"
          style="margin-left: 8px;"
        >
          {{ expanded ? '折りたたみ ⬆️' : '展開 ⬇️' }}
        </van-button>
      </template>
    </van-text-ellipsis>
  </div>
</template>

<script>
export default {
  setup() {
    const text = 'その日、私は二十一歳。人生の黄金期にいた。私は多くを望み、愛し、食べ、瞬く間に空の半ば明暗の雲になりたいと思った。後になって、人生はゆっくりと槌で打たれる過程だと知った。人は日々年を重ね、願いも少しずつ消えていき、最後には打たれた牛のようになる。しかし、二十一歳の誕生日にはそれを予見できなかった。私はずっと猛々しく生き続け、何者にも打ち負かされないと思っていた。';
    
    return {
      text,
    };
  },
};
</script>

<style>
.demo-text-ellipsis {
  padding: 16px;
}
</style>

API

Props

パラメータ	説明	型	デフォルト
rows	📏 表示行数 - 最大表示行数を制御	*number	string*
content	📝 表示するテキスト内容 - 任意長に対応	string	-
expand-text	🔍 展開ボタンの文言	string	-
collapse-text	📁 折りたたみボタンの文言	string	-
dots v4.2.0	✂️ 省略記号のテキスト	string	'...'
position v4.6.2	📍 省略位置 - start(先頭) middle(中間) end(末尾)	string	'end'

Events

イベント名	説明	コールバック引数
click-action	🖱️ 展開/折りたたみ時に発火	event: MouseEvent

TextEllipsis メソッド

ref で TextEllipsis インスタンスを取得してメソッドを呼び出せます。詳細はコンポーネントインスタンスメソッド。

メソッド名	説明	引数	戻り値
toggle	🔄 テキストの展開状態を切り替え	expanded?: boolean	-

Slots

名前	説明	引数
action v4.8.3	🎨 操作内容のカスタマイズ	{ expanded: boolean, toggle: Function }

型定義

🔧 TypeScript サポート - 以下の型定義を提供します：

importtype { TextEllipsisProps, TextEllipsisInstance, TextEllipsisThemeVars, } from'vant';

TextEllipsisInstance はコンポーネントインスタンスの型です：

import { ref } from'vue'; importtype { TextEllipsisInstance } from'vant'; const textEllipsisRef = ref<TextEllipsisInstance>(); textEllipsisRef.value?.toggle();

テーマカスタマイズ

スタイル変数

🎨 個性的なスタイル調整 - 以下の CSS 変数でスタイルをカスタマイズできます。詳しくは ConfigProvider コンポーネント。

名称	デフォルト	説明
--van-text-ellipsis-action-color	var(--van-blue)	🔗 操作ボタンの色
--van-text-ellipsis-line-height	1.6	📏 行の高さ

関連ドキュメント

📱 表示コンポーネント

• Cell セル - 📋 リスト項目表示、テキスト省略と併用
• List リスト - 📜 長いリスト表示、読書体験を最適化
• Card カード - 🃏 カード表示、レイアウトをすっきり保つ

🎯 フィードバックコンポーネント

• Loading ローディング - ⏳ ローディング表示
• Skeleton スケルトン - 💀 読み込み時のプレースホルダ

🔧 ツールコンポーネント

• ConfigProvider グローバル設定 - ⚙️ テーマ設定の一元化