テキストエリアで入力する場合はだいたい長文か箇条書きにしたテキストが多いかと思われますが
普通のpやspanを設定しただけでは水平にどんどん延びてしまい、周りのレイアウト崩壊を
招いてしまいます。
この場合はwhite-spaceプロパティのpre-wrapをつかうことでレイアウトのずれを防止する
ことができます。
white-spaceは、テキスト上の余白を操作するためのプロパティで、表示したい文章の領域を
決めたい時によく使われます。
それぞれのプロパティの特性を見てみると
white-space: normal・改行しない・折り返しあり
white-space: nowrap・改行しない・折り返しなし
white-space: pre・改行する・折り返しなし
white-space: pre-wrap・改行する・折り返しあり
となっており、今回使った「pre-wrap」は入力したテキストが定めた横幅を
超えた時に折り返します。
一見normalでもいけそうですが、こちらは改行が出来ないので箇条書きで書かれた文章は
綺麗に表示することができません。
<span className="text-area">本日は午前は曇り、ところにより雨が降るでしょう。夜6時からはより一層雨が強くなるでしょう</span>
span.text-area {
padding: 0px 10px;
font-size: 14px;
white-space: pre-wrap;}
改行ナシならnormal,改行も含めたいならpre-wrapといった感じですね。nowrapは
使い道が良く分かりません。
少なくとも面積の狭いモバイルアプリではあまり出番がなさそうに感じます。
