Fixed width div/textarea with no scroll bars needs to expand to content

Hi Experts,

 I have some dynamic text content that I need to echo. I want it to fill a space 580px in width. Should the content exceed 580 it needs to wrap and expand either the div or the texarea. I have got this to work using a textarea and wrap="virtual' in Safari but it produces on long line of text and a scroll bar in FF and IE.
I have tried max-width but that only works in Saf too.
Is this possible? It seems basic but i can't seem to find an example that works in the knowledge base.

Thanks for any help.
Who is Participating?
scrathcyboyConnect With a Mentor Commented:
DIVS and text areas will ALWAYS show scroll bars if the content exceeds the DIV height -- with DIVs you can elminate the scroll bars with --

DIV {scroll-y:no; scroll-x:no;}

with text area, you cannot solve this.  Why not just use a table?  If the user can't edit the content, just put it in a table and the table cell will automatically fill the table and wrap correctly without ANY scroll bars --

<TABLE width="580">
     <TD width="580"> content here </TD>

that is guaranteed to work, no matter how big the content is.
This is what someone else posted on here.



function MakeSizeAdjustment(oTextArea)
      if (navigator.appName.indexOf("Microsoft Internet Explorer") == 0)

      while (oTextArea.scrollHeight > oTextArea.offsetHeight)



The amazing, incredible, expanding text-area:
<textarea style="overflow:visible;width:30%" rows="3" onkeyup="MakeSizeAdjustment(this)">Some Test Text</textarea>

RowdyBurnsAuthor Commented:
EEErm. This still displays scroll bars in FF.
RowdyBurnsAuthor Commented:
Thank you for having a look at this.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.