Issue in PRE tag with word wrap

Question

Hi,

For me, word wrapping in PRE tag works fine, but the <TD> which holds the PRE tag goes off the specified width of the <TD> or <PRE>. This affects the layout of the screen.

Can anyone suggest me a solution?

My code is as follows:

<TABLE><TR><TD width="300">

<PRE style="width:300px;word-wrap:break:word">

Lengthy text goes here !!! Lengthy text goes here !!!Lengthy text goes here !!!Lengthy text goes here !!! Lengthy text goes here !!! Lengthy text goes here !!!Lengthy text goes here !!!Lengthy text goes here !!!Lengthy text goes here !!!Lengthy text goes here !!!Lengthy text goes here !!!

</PRE></TD></TR></TABLE>

 

Regards

Devi Sri

 

Answer 1

Try this:

<table style="width: 300px; table-layout: fixed;">
  <tr>
    <td style="width: 100%;">
      <pre style="word-wrap: break-word;">Some quite long text phnar phnar</pre>
    </td>
  </tr>
</table>

The key is table-layout: fixed; - this will stop the table growing beyond what you have specified in the width.  The word-wrap: break-word; will er cause the pre to word wrap, rather than disappear off the edge of the table.

Answer 2

 

Thank you Mr. Andrew Cooper.

 

it works well. I have checked in Firefox 2.2, Safari browsers too.

Answer 3

thank   you 는 뭐야 또 , 안되는데....

Answer 4

Thanks Andrew for the tip, it worked perfectly as what we are looking for.