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

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

спасибо!

6
asp.net-mvc-2 css html jquery

4 ответов

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

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

2

Это, кажется, работает для меня:

<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 вы даете ему атрибут стиля с шириной и переполнением.

0

никто больше не делает этого, поэтому я сделаю.

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

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

0

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

-1