Truncate

使用法

import { __experimentalTruncate as Truncate } from '@wordpress/components';
function Example() {
   return (
   <Truncate>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
   neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
   mollis mi. Morbi id elementum massa.
   </Truncate>
   );
}

プロパティ

children: ReactNode

子要素。

注意: テキストの切り捨ては、children が string または number のいずれかの型である場合にのみ試みられます。それ以外のシナリオでは、コンポーネントはテキストを切り捨てようとせず、children をそのまま通過させます。

• 必須: はい
  

ellipsis: string

テキストを limit プロパティの値で切り捨てるときの省略記号の文字列。

• 必須: いいえ
• デフォルト: …
  

ellipsizeMode: ‘auto’ | ‘head’ | ‘tail’ | ‘middle’ | ‘none’

どこで切り捨てるかを決定します。たとえば、テキストを真ん中で切り捨てることができます。これを行うには、ellipsizeMode を middle に設定し、テキスト limit を指定する必要があります。

• auto: limit なしで自動的にコンテンツを末尾で切り捨てます。
• head: コンテンツを先頭で切り捨てます。limit が必要です。
• middle: コンテンツを真ん中で切り捨てます。limit が必要です。
• tail: コンテンツを末尾で切り捨てます。limit が必要です。
• 必須: いいえ
• デフォルト: auto
  

limit: number

テキストが切り捨てられる前に表示される最大文字数を決定します。ellipsizeMode は auto および none とは異なる値を取る必要があります。

• 必須: いいえ
• デフォルト: 0
  

numberOfLines: number

テキストコンテンツを指定された numberOfLines に制限し、末尾に省略記号を追加します。注意: この機能は ellipsis プロパティの値を無視し、常にデフォルトの … 省略記号を表示します。

• 必須: いいえ
• デフォルト: 0

import { __experimentalTruncate as Truncate } from '@wordpress/components';
function Example() {
   return (
   <Truncate numberOfLines={ 2 }>
   Where the north wind meets the sea, there's a river full of memory.
   Sleep, my darling, safe and sound, for in this river all is found.
   In her waters, deep and true, lay the answers and a path for you.
   Dive down deep into her sound, but not too far or you'll be drowned
   </Truncate>
   );
}