textareaで改行文字が乱れているのを解決したい

Question

前提・実現したいこと

CSSでtextareaの文字の改行が反映されるようにしたのですが、
全て左づめで表示されず1行目の頭に空白がいくつか入ってしまいレイアウトが崩れてしまいます。
これを解決し1行目も左づめで表示したいです。

発生している問題・エラーメッセージ

textareaで入力した文字が全て左づめで表示されず
1行目の頭に空白がいくつか入ってしまいレイアウトが崩れてしまう。

該当のソースコード

show.html.erb

<main class="main">
  <div class="inner">
    <div class="prototype__wrapper">
      <div class="prototype__image">
        <%= image_tag @song.image, class: :song__img %>
      </div>
      <% if artist_signed_in? && current_artist.id == @song.artist_id %>
        <div class="prototype__manage">
          <%= link_to "編集する", edit_song_path(@song), class: :prototype__btn %>
          <%= link_to "削除する", "/songs/#{@song.id}",method: :delete, class: :prototype__btn %>
        </div>
      <% end %>
      <p class="prototype__hedding">
        <%= @song.title %>
      </p>
      <%= link_to @song.artist.name, root_path, class: :prototype__user %>
      <div class="prototype__body">
        <div class="song__detail">
          <p class="detail__title">作詞</p>
          <p class="detail__message">
            <%= @song.writer %>
          </p>
        </div>
        <div class="song__detail">
          <p class="detail__title">作曲</p>
          <p class="detail__message">
            <%= @song.composer %>
          </p>
        </div>
        <div class="song__detail">
          <p class="detail__title">歌詞</p>
          <p class="detail__lyric">
            <%= @song.lyric %>
          </p>
        </div>
      </div>
    </div>
  </div>
</main>

style.css

/* 詳細ページ */
.prototype__wrapper{
  min-height: calc(100vh - 161px);
}
.prototype__hedding{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.prototype__user{
  display: block;
  font-size: 16px;
  color: #999;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 20px;
}
.prototype__user:hover{
  text-decoration: none;
}
.prototype__image{
  margin: 0 auto;
  width: 250px;
  height: 250px;
  object-fit: cover;
}
.song__img {
  width: 250px;
  height: 250px;
  object-fit: cover;
}
.song__detail{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 8px;
}
.detail__title{
  font-weight: bold;
}
.detail__lyric{
  white-space: pre-wrap;
}
.prototype__manage{
  display: flex;
  justify-content: center;
  padding-top: 16px;
}
.prototype__btn{
  display: block;
  padding: 0.4em 1.6em;
  font-size: 0.4em;
  color: #999;
  text-decoration: none;
  user-select: none;
  border: 1px #999 solid;
  border-radius: 3px;
  transition: 0.4s ease;
  margin: 0 4px;
}
.prototype__btn:hover{
  color: #fff;
  background: #999;
}

試したこと

text-alignを試してみましたがcenterにしてもleftにしても
1行目の頭に空白が入ってしまうのは変わりませんでした。

Comments

[int32_t]

現在掲載されているコードのどのあたりが「textareaの文字の改行が反映されるようにした」部分でしょうか?

[tattobu]

説明不十分で失礼いたしました。

show.html.erb

```ruby
<div class="song__detail">
<p class="detail__title">歌詞</p>
<p class="detail__lyric">
<%= @song.lyric %>
</p>
</div>
```
style.css

```ruby
.detail__lyric{
white-space: pre-wrap;
}
```

以上の箇所が該当箇所です。
よろしくお願い致します。

[int32_t]

textareaの表示の話ではなくて、別のページのtextareaで入力された何らかのデータを<p>の中に表示するときの話でしょうか?
まずは song.lyric にどんなデータが入っているかの確認ですかね。

Answer 1

white-space: pre-wrap が指定されているので、空白はそのまま空白で描画されます。<%= @song.lyric %> の前にある空白が描画されていると思われるので、それを消しましょう。

修正前:

          <p class="detail__lyric">
            <%= @song.lyric %>
          </p>

修正後:

          <p class="detail__lyric"><%= @song.lyric %></p>

Comments

[tattobu]

ありがとうございます。
おかげさまで解決いたしました。

Answer 2

textareaで入力した改行は\r\nです。
htmlで表示したいときは\r\nを<br />に入れ替えてください。