テキストボックスの表示で段落を作りたい

Question

html,cssでテキストボックスを作っています。
そこで、テキストを段落で作り、横は自動改行とし、縦はスクロールで
下まで見れるようにしたいです。

段落をつくろうとｐではなくpreと変えてやってみると、文字の段落はうまくできましたが、横が自動改行ではなくなり、スクロールになってしまいます。
pのまま<li>を入れると文字がテキストボックスから出てしまいました。

どうすればテキストボックス内で段落や段落の行で改行する場合はその段落の頭をそろえて改行とするのでしょうか？

<p class="user_policy">
こんにちわ。
今日はいいお天気ですね。朝は目覚めがよかったです。気持ちよかったのでランニングまでしちゃったよ。</br>
一汗かいてあともまた気持ちがいいよ。</br>
朝やることは
　1.メールチェック
　　・〇〇さんの案件進捗報告
　　・〇〇案件の〇〇についてヒアリング
　2.読書
　　・火の鳥
　　・NARUTO

以上、イェーイ！
</p>

.page_content .user_policy{
  background-color: #FFFFFF;
  width: 100%;
  font-weight: normal;
  font-size:12px;
  font-size: 1.2rem;
  height: 12px;
  height: 12rem;
  overflow-y: scroll;
  border: solid 1px #aaa;
  text-align: left;
  padding-left: 1em;
  text-indent: -1em;
}

Answer 1

適切なマークアップをすればcssでゴリゴリ整形する必要はありません。（x_xさんのコメントと同意見です。）

<div class="user_policy">
  <p>こんにちわ。</p>
  <p>今日はいいお天気ですね。朝は目覚めがよかったです。気持ちよかったのでランニングまでしちゃったよ。</br>
一汗かいてあともまた気持ちがいいよ。</br>
朝やることは</p>
  <ol>
    <li>メールチェック
      <ul>
        <li>〇〇さんの案件進捗報告</li>
        <li>〇〇案件の〇〇についてヒアリング</li>
      </ul>
    </li>
    <li>読書
  　　<ul>
        <li>火の鳥</li>
        <li>NARUTO</li>
      </ul>
    </li>
  </ol>
  <p>以上、イェーイ！</p>
</div>

Answer 2

pre-wrap で pre のように空白文字を生かしつつ折り返すようにできます。

white-space: pre-wrap;

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

Comments

[kozica]

pre-wrapにすると、横スクロールがなくなり自動改行はできましたが、改行した際に、段落を無視してボックス先頭から次のスタートしてしまいます。
自動改行をその改行した行の先頭に合わせることはできないでしょうか？

[x_x]

整形済みテキストと思って回答していましたが、そうでないのであればテキストの改行等に頼るべきではありません。