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

No one else is doing it, so I will.

I used this which was stated in the comments and it works.

Auto-size dynamic text to fill fixed size container