View on GitHubテキストの折り返しを制御
Example#
Props#
<span>要素をベースにしています。 表にない属性もprop経由で使用できます（classNameは除く）。
| Name | Type | Default | Description |
|---|---|---|---|
| data-* optional | string | - | Custom data attributes |
| inline | boolean | false | inline-blockとして扱う |
| whiteSpace | 'pre''pre-wrap''pre-line' | 'pre-line' | 折り返しや空白、改行の扱い |
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などのサイズに影響します。