Динамическое размещение текста в div

<div rownumber="0" messageid="141" class="post" style="position: relative; top: 0px;">
    <div class="post_body">testbox</div>
    <div class="post_info" style="top: 0px;">
        <ul>
            <li class="vote" id="voteli"><a href="#">vote up</a></li>
            <li class="flag" id="flagli"><a href="#">flag</a></li>
        </ul>
    </div>
</div>

Итак, эти div генерируются на лету и помещаются в контейнер div во внешнем интерфейсе. Они генерируются на бэкэнде и возвращаются в виде HTML через Json.

div class = "post_body" - это то, что содержит сообщение пользователя, текущее сообщение с надписью «testbox». Теперь проблема, с которой я столкнулся, заключается в том, что когда пользователь пишет сообщение, выходящее за пределы ширины div , оно просто продолжается, оно не попадает во вторую строку.

Вот это две вещи, которых я хочу достичь:

1. Я хочу убедиться, что когда текст не помещается по горизонтали, он переходит во вторую строку в том же div.
2. Я хочу уменьшить текст, если он должен быть в двух строках таким образом высота div post_body может оставаться неизменной каждый раз.

Как я могу это сделать?

Спасибо!