Automatic linebreak if word breaks out of table element

I found a great source how to prevent word break outs in <th> and <td> elements:
Peter Bromberg's: FIREFOX / IE Word-Wrap, Word-Break, TABLES FIX
How does the break out looks like:


CSS code to prevent this issue:

.prevent_breakout
{
width: 250px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

With javascript it could look like this:

<script type="text/javascript">
 function set_lb(v_val, v_max_width){
  var v_browser=navigator.appName; 
  // ...
  if (v_browser=="Microsoft Internet Explorer")  
  {
    $x(v_val).style.width = v_max_width; // set width
    $x(v_val).style.wordWrap   = 'break-word';  // Internet Explorer 5.5+
  }else
  {
    $x(v_val).style.width = v_max_width; // set width
    $x(v_val).style.whiteSpace = 'pre-wrap'; // css-3
    $x(v_val).style.whiteSpace = '-pre-wrap';  // Opera 4-6
    $x(v_val).style.whiteSpace = '-o-pre-wrap';  // Opera 7
    $x(v_val).style.wordWrap   = 'break-word';  // Internet Explorer 5.5+
    $x(v_val).style.whiteSpace = '-moz-pre-wrap'; // Mozilla, since 1999
  }
</script>

Thanks Peter for this great hint!

Update 07.05.2010
Report Attributes > Column Attributes > Column Formatting > CSS Style:
overflow:hidden;float:left;width:250px;word-wrap:break-word;white-space:pre-wrap;display:block;

Post Tags:

IE issues