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

slandau
  • 23,528
  • 42
  • 122
  • 184
  • For point number one: how about using word-wrap: break-word; ? – Ross Jun 15 '11 at 21:06
  • 1
    For the font resize: http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container – James Montagne Jun 15 '11 at 21:08
  • http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container - read this. As for 1) - what CraigW said. – AR. Jun 15 '11 at 21:09
  • The plugin in that link is what I need, I'll create another question as for how to apply it to dynamically generated HTML not in the DOM yet as it's being entered. - put it as an answer and ill accept. – slandau Jun 16 '11 at 15:40

4 Answers4

3

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

CraigW
  • 715
  • 4
  • 5
  • Well remember, these div's aren't typed into on the front end, they are generated on the backend, so I was thinking I would re-size the text on the backend. – slandau Jun 15 '11 at 21:08
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

Community
  • 1
  • 1
slandau
  • 23,528
  • 42
  • 122
  • 184
0

This seems to be working 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 when u generate your div you give it a style attribute with a width and overflow.

Wicked Coder
  • 1,128
  • 6
  • 8
-1

use this code overflow-wrap: break-word;

morteza
  • 1