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

個人制作アプリで感じる「ちょっとしたつかいづらさ」
RUNTEQ生のアプリの多くで感じるのが、「改行したのに、1行で表示される」問題です。
例えば、以下の投稿をすると
とてもいい記事ですね!
質問なのですが、〇〇は〇〇ですか?
私としては〇〇かなと思います。
以下のように表示されてしまう
とてもいい記事ですね! 質問なのですが、〇〇は〇〇ですか? 私としては〇〇かなと思います。
これが意図した仕様でない限りは、もったいない要素になっていると感じます。
投稿が長文であるほどこのデメリットは大きく、
長文を書きたい時 = 熱量がある時 にストレスを与えてしまう、とも言えるかもしれません。
<pre>
解決策1 HTMLタグ<pre>
(preformatted text) を使用すると良いようです。
※わかったように書いていますが、<pre>
タグの実装経験はありません。
<pre>
タグの内部では、以下のHTMLルールが無効になります。
- 連続する半角スペースはまとめて1つの半角スペースとして扱われる
- タブ文字は半角スペース1つとして扱われる
- 改行コードは半角スペース1つとして扱われる
- テキストが表示領域の幅に達すると、そこで折り返して表示される
max-height
もしくはheight
を設定し、意図しない長文のレイアウト崩れを防ぐ必要がありそうです。
white-space
解決策2 CSSプロパティwhite-space
を使用することでも、改行問題を解決できるかもしれません。
以下のMDNにサンプルがあります。
このプロパティは 2 つのことを指定します。
・ホワイトスペースを折り畳むかどうか、およびその方法。
・行を自動折り返しの場面で折り返すことができるかどうか。
<br>
に変換
解決策3 改行を地道で少し手間がかかりますが、意図しない副作用を防ぐには一番良いやり方かもしれません。
const formattedInput = userInput.replace(/\n/g, "<br>");