Open1

「改行したのに、1行で表示される」問題を解決する簡単な方法

Kohki_TakatamaKohki_Takatama

個人制作アプリで感じる「ちょっとしたつかいづらさ」

RUNTEQ生のアプリの多くで感じるのが、「改行したのに、1行で表示される」問題です。

例えば、以下の投稿をすると

とてもいい記事ですね!

質問なのですが、〇〇は〇〇ですか?
私としては〇〇かなと思います。

以下のように表示されてしまう

とてもいい記事ですね!  質問なのですが、〇〇は〇〇ですか? 私としては〇〇かなと思います。

これが意図した仕様でない限りは、もったいない要素になっていると感じます。

投稿が長文であるほどこのデメリットは大きく、
長文を書きたい時 = 熱量がある時 にストレスを与えてしまう、とも言えるかもしれません。



解決策1 <pre>

HTMLタグ<pre> (preformatted text) を使用すると良いようです。
※わかったように書いていますが、<pre>タグの実装経験はありません。


<pre>タグの内部では、以下のHTMLルールが無効になります。

  • 連続する半角スペースはまとめて1つの半角スペースとして扱われる
  • タブ文字は半角スペース1つとして扱われる
  • 改行コードは半角スペース1つとして扱われる
  • テキストが表示領域の幅に達すると、そこで折り返して表示される

max-heightもしくはheightを設定し、意図しない長文のレイアウト崩れを防ぐ必要がありそうです。



解決策2 white-space

CSSプロパティwhite-spaceを使用することでも、改行問題を解決できるかもしれません。

以下のMDNにサンプルがあります。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space

このプロパティは 2 つのことを指定します。

・ホワイトスペースを折り畳むかどうか、およびその方法。
・行を自動折り返しの場面で折り返すことができるかどうか。



解決策3 改行を<br>に変換

地道で少し手間がかかりますが、意図しない副作用を防ぐには一番良いやり方かもしれません。

const formattedInput = userInput.replace(/\n/g, "<br>");