テキストの折り返しを制御

Example#

Props#

NameTypeDefaultDescription
whiteSpace"pre" | "break-spaces" | "pre-line" | "pre-wrap"'pre-line'折り返しや空白、改行の扱い
inlinebooleanfalseinline-blockとして扱う
data-*
optional
string-Custom data attributes

Feature#

  • テキストの折り返しを制御します
  • ネイティブの<pre>要素と似たような機能を持ちます
  • <pre>と違い、フォントのスタイルを変更しません(通常、<pre>にはブラウザのデフォルトスタイルが適用されています)

Usage#

whiteSpace propはCSSのwhite-spaceプロパティに該当します。

  • pre: テキストの空白や改行がそのまま表示されます
  • pre-wrap: preとほぼ同じですが、テキストがコンテナからはみ出る場合に折り返されます
    • 長い連続する空白が存在した場合、コンテナからはみ出る可能性があります
  • pre-line: pre-wrapとほぼ同じですが、空白が連続した場合は1つにまとめられます
  • break-spaces: pre-wrapとほぼ同じですが、連続する空白がコンテナからはみ出た場合に折り返されます。また、空白がmin-contentmax-contentなどのサイズに影響します。