浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

長文の改行・折り返し両方に対応する

テキストエリアで入力する場合はだいたい長文か箇条書きにしたテキストが多いかと思われますが

普通の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は

使い道が良く分かりません。

少なくとも面積の狭いモバイルアプリではあまり出番がなさそうに感じます。

  • この記事いいね! (0)