Dynamic text in 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> 

So, these divs are generated on the fly and placed in the container div at the front end. They are created on the backend and returned as HTML via Json.

div class="post_body" - this is what the user message contains, the current one that says "testbox". Now the problem is that when the user writes a message that goes beyond the width of the div , it just keeps moving, it does not affect the second line.

Here are two things I want to achieve:

• I want to make sure that when the text does not fit horizontally, it goes to the second line inside the same div.
• I want to compress the text if it needs to go along two lines so that the height of the post_body div always remains consistent.

How can i do this?

Thanks!

Answer 1

No one does this, so I will.

I used this as mentioned in the comments and it works.

Auto-size dynamic text to fill a fixed-size container

Answer 2

You can just use CSS and set the width of the div for a specific amount. When the text gets large to fit the width of the DIV tag, it just wraps around.

To adjust the font size, you will have to go crazy with javascript. Personally, I would just set the height for the DIV tag and set the CSS overflow overflow to auto, which will cause the div to scroll when there is a lot of text to fit the size of the DIV tags

Answer 3

This seems to work for me:

 <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> 

Make sure that when you create your div, you give it a style attribute with width and overflow.

Answer 4

use this code overflow-wrap: break-word;