テキストの折り返しを制御
Example#
Props#
Name | Type | Default | Description |
---|---|---|---|
whiteSpace | "pre" | "break-spaces" | "pre-line" | "pre-wrap" | 'pre-line' | 折り返しや空白、改行の扱い |
inline | boolean | false | inline-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-content
やmax-content
などのサイズに影響します。