Textarea 半角スペース入力

Question

Webサイトをつくています。
Textareaに入力をして完了ボタンを押すと入力した内容が画面に表示される仕組みです

入力画面でTextareaに文字を入力した後、半角スペースを何個か入れてそのあとにまた文字を入れて
完了ボタンを押します。完了ボタンを押したら画面遷移し入力した内容が表示されるのですが半角スペースだけ反映されていません
html

<textarea name = "sumarry" cols="20" style="width:100%"> ああああ ああああああ </textarea>

入力後
<span id="sumarry">
ああああ ああああああ
</span>

デベロッパーツールで確認したところ入力した空欄は反映されていましたが画面上で見ると半角スペースが消された状態で表示されてしまいます
どうしたらいいでしょうか？

Comments

[退会済みユーザー]

前のスレッド https://teratail.com/questions/148381 内容を消しましたね。そういうことをしていると誰も相手にしてくれなくなりますよ。

Answer 1

span#sumarry {
  white-space: pre;
}

https://developer.mozilla.org/ja/docs/Web/CSS/white-space

Comments

[ktaaa]

ありがとうございました。

Answer 2

半角スペースが消された状態

「半角スペースが縮まった状態」の間違いでは？
連続した空白文字は、１つの空白として表示されます。

Comments

[ktaaa]

申し訳ありません
その通りです。

[ktaaa]

連続した空白を表示させる方法はないのでしょうか？

[otn]

半角空白を &emsp; とか &ensp; に置換して表示してください。

[ktaaa]

できました。
ありがとうございます

Answer 3

HTML上は連続した半角スペース（改行も）は1つの半角スペースとして扱われます。
半角スペースで文字間を調整する意図がよくわかってませんが、
解決策としては特殊文字を使うか全角スペースで対応するなどができます。