Dynamic text fitting into 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 div's are generated on the fly, and placed into a container div on the front end. These are generated on the backend and are returned as HTML through Json.

The div class="post_body" is what holds the user message, current the one that says 'testbox'. Now, the issue I'm having is, when a user writes a message that extends beyond the width of the div, it just keeps going, it doesn't bump onto the second line.

Here's the two things I want to achieve:

1. I want to make sure when the text doesn't fit horizontally, it goes onto a second line within the same div.
2. I want to shrink the text if it needs to go on two lines that way the height of the post_body div can stay consistent every time.

How can I do this?

Thanks!

Answer 1

You can just use CSS and set the width of the div to a specific amount. When the text gets to big to fit the width of the DIV tag it will just wrap.

To adjust the font size you'll have to get crazy with javascript. Personally I would just set a height to the DIV tag as well and set the CSS overflow-y to auto, which will cause the div to scroll once there is to much text to fit the DIV tag dimensions