How to stop overflowing of dynamic data beyond table ?

Question

It's a Struts application. I have to show some dynamic date in the left hand panel retrieving from DB or any session object e.g Notes. If there is space between words then its working fine. But while testing if I am entering some characters without space, then while showing the data in Left hand panel is crossing the table and coming on main panel in IE8, Mozilla and chrome also.

My part of sample code is like this.

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="fixedTable">
<tr>
 <td class="normalTxt" width="100" style="text-align:left;"
   bean:write name="cNotesInfo" property="description" /> 
 </td>
</tr>
</table>

Any solution please.

I have removed the < / > symbol to make U sho the code.

Answer 1

You could add a space to your data before rendering to the screen.

string Data = "areallylongstringthatisgoingtobreakyouroutputresult"
if(Data.Length > 50 && !Data.Contains(' ')){
    Data.insertAfter(25,' ');
}

Also there is this for selected browsers.. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

.break-word {
  word-wrap: break-word;
}

One important note - if the element has a fixed width this approach works well. However if you have width 100% this doesn’t do the job