How can I force a literal or div to only be so wide

Question

I have users enter info into a textarea that's been set to runat-"server" and that is 600px wide on 1 page. When they click a button the contents are supposed to show on the second page. I've tried displaying them as both aliteral and div. But in both cases, even if I put controls in a table and set the width of the table and columns to 600px, if I put, say 1000 characters in the textarea on page one, on page 2 the display control is far wider than the 600 pixels I want to limit it to. How can I force a control to only be so wide. PS>. It has to be a literal or div because i am trying to render HTML in them.

Answer 1

Perhaps try this style on your output page. I set overflow:hidden so that if you enter a really long word with no whitespace, it'll hide the excess text that can't be wrapped rather than extending the width of the box.

CSS:

.output
{
  width:600px;
  overflow:hidden;
  word-wrap:break-word;
}

HTML:

<div class="output">
   Hello World
</div>