divの幅に合わせてpを折り返すように表示する

pタグの文章をdivの幅に合わせて折り返させるにはどうしたら良いのでしょうか?

親要素の幅さえ指定しておけば勝手に折り返してくれる方法があります


<div class="main-content">
<img src="image/yama.jpg" class="main-content-img">
<div class="main-content-text">
<h3>main-content-text-Title</h3>
<p>main-content-textmain-content-textmain-content-textmain-content-textmain-content-textmain-content-text</p>
</div>
</div><!--main-content-->

この場合、main-contentというdivにp要素は包まれています

そのためこの要素に中の文章を折り返す設定を記述すればいいことになります


.main-content{
width: 300px;
word-wrap: break-word;
}

包んでいる方の要素には横幅の指定が必要ですが、p要素の方には何もしなくて良いので便利です

ちなみに、包んでいる方の横幅の指定が必要ということですが何もピクセルなどで指定する必要はなく%でもいけるので画面幅に合わせたデザインの時重宝します