Topic: how to fix text to DIV width on site resizing, not just truncate?

It would seem that because the text is using truncate or because of the div's, if the website is resized the text does not resize along with the page.  How to make truncate proportional to the available DIV space?

Or, how to allow for dynamic resizing not affecting (up to a point) of how the page is viewed?  Also how to set a preferred site size so that up to a point but no further?

i have text that is truncated fine in English, but the Japanese version of the same thing sometimes goes off the div section (look for the japanese text on the bottom right of http://jcsaonline.ca )

I'm using truncate of 300 characters in my partial.  Here's an example.  This is a news portion partial that loops through all news items, if tag.title_japanese is labelled 'outside event' then loop through and generate a list of those events.  Ignore, post.publish? as it's a flag users can set to enable or disable a post without deleting it.

<% for tag in @tags %>
  <% unless tag.posts.empty? %>
    <% if tag.title_japanese == '&#22806;&#37096;&#12452;&#12505;&#12531;&#12488;' %>
   
     <ul>
        <% for post in tag.posts %>
          <% if post.publish? %>
              <li>
                <b><i>
                <%= h display_jdate(post.occurs_on) %>
                </i></b> .::.
               
                <%= link_to post.title_japanese, post %><br/>
               
      ---->     <%=h truncate(post.description_japanese, length=300, truncate_string="...") %><br/>
              </li> 
        <% end %> 
      <% end %>
    </ul >
   
    <% end %>
  <% end %>
<% end %>

Is there a way to use the character limit of the div / CSS instead?  Can you think of another means of enforcing a character limit or text display limit?  Do I DIV my DIV?

Also this could all just be a CSS issue which I have no idea about!

Because the text is Japanese this would remove the error of counting characters with truncate, because Japanese uses double byte width, causing havoc. 

Also as noted above if the page is resized I want the text to resize with the page.  In the case of a truncate of 300 it also has to be dynamic to the available space.

I guess I'm looking for examples of CSS and DIV while working with text and dynamic respect for that design from partials.

even just some off-the-brain suggestions would help a lot.


thanks

Last edited by sf2k (2009-01-24 15:16:37)

Re: how to fix text to DIV width on site resizing, not just truncate?

You need to give length to your ul where the text is. I tried in that site, and 380px fits nicely. Give a class to that problematic ul example ".long". and give css property width: 380px;. (Use float: left, if it needs it.)