p要素の幅をwidthを指定した親要素の幅に収めたい。

Question

前提・実現したいこと

p要素の幅をwidthを指定した親要素の幅に収めたい。

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

p要素が親要素の幅を超えて表示されてしまう。
初めての質問で鵜明確な部分もあるかもしれませんが、ぜひとも回答よろしくお願いします。

該当のソースコード

    <section id="modal">
      <h2>Hello!</h2>
      <div class="text-content">
      <p>hello!hello!hello!hello!!hello!hello!hello!hello!hello!hello!hello!hello!hello!hello!hello!hello!hell!
      </p>
      </div>
      <div id="close">閉じる</div>
  </section>

#modal{
    border:gray solid 1px;
    width:70%;;
    text-align:center;
    border-radius:4px;
    margin:0 auto;
    padding:0 10px;
    position:absolute;
    top:40px;
    left:0;
    right:0;
    background:white;
}
.text-content{
 width:70%;
}

試したこと

親要素の幅と同じ幅をp要素に指定したり、p要素をdivタグで囲ったりした。
word-wrapなども指定してみた。

補足情報（FW/ツールのバージョンなど）

Comments

[wataame]

p{
word-wrap: break-word; /* 折り返し */
}
じゃダメでしたっけ、、

[takuma1217]

解決しちゃいました！！
感動しております笑
ありがとうございました！！

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[takuma1217]

かしこまりました！ご指摘ありがとうございます！

Answer 1

p{
word-wrap: break-word; /* 折り返し */
}

だと思います。