Динамическое вписывание текста в div

Question

<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. Я хочу сжать текст, если он должен идти на две строки, чтобы высота post_body div всегда оставалась неизменной.

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

Спасибо!

Answer 1

Вы можете просто использовать CSS и установить ширину div на определенную величину. Когда текст станет большим, чтобы соответствовать ширине тега DIV, он будет просто перенесен.

Чтобы настроить размер шрифта, вам придется сходить с ума с помощью JavaScript. Лично я бы просто установил высоту для тега DIV и установил CSS overflow-y на auto, что заставит div прокручиваться, когда текста будет много, чтобы соответствовать размерам тега DIV

Answer 2

используйте этот код overflow-wrap: break-word;

Answer 3

Больше никто этого не делает, так что я буду.

Я использовал это, что было указано в комментариях, и оно работает.

Авторазмер динамического текста для заполнения исправленразмер контейнера

Answer 4

Мне кажется, это работает:

<div rownumber="0" messageid="141" class="post" style="position: relative; top: 0px;">    
     <div class="post_body" style="width:100px; overflow:scroll; ">testbox. this is a test. this is a test. this is a test.</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, вы задаете ему атрибут style с шириной и переполнением.