Preventing Horizontal Scrolling in Forums/Guestbooks

How can I make long lines split?

[Giacomo]

I recurrent problem with forum/guestbook
software is to prevent horizontal scrolling in
case someone enters a really long line of text
such as

really_long_line_of_text_really_long_line_of_text_really_long_line_of_text

Is there any HTML/CSS trick to "force" long
lines to wrap inside a table cell? I have tried
with fixed-width tables/cells, but that just
doesn't seem to work, as the table cell
automatically adapts to fit the content. :(

Thanks.

[edited by: tedster at 5:27 pm (utc) on Feb. 12, 2004]
[edit reason] we don't want side-scrolling either! [/edit]

[Purple Martin]

I ran into the side-scrolling problem a few weeks ago. I can tell you that some browsers/operating systems will word-wrap on certain characters, but the most common browser, IE, doesn't.

Tables make the problem trickier still: tables are designed for tabular data (no matter what you want to use them for, that's what they were invented for). The result of this is that they grow to fit the data in the cells, because that's what they're supposed to do - in all browsers. There is no HTML or CSS trick to stop this that I know of.

The problem can be fixed with some server-side scripting that chops a word into two (inserts a space) if it is longer than a certain number of characters. This does of course have a negative impact on server performance, but if the fix is a necessity you'll have to live with it.

[twist]

You could force the user to process it in javascript to save the servers resources are you could process it server side. You would first have to store the users input text as a string. Then process it with a script.

If you can use php cut & paste this script to see a example,

<?
$text = 'Here is a really_long_string_of_text_that_I_have_written_for_this_example below.';
$count = 0;
$output_text = '';
$text_length = strlen( $text );
for( $loop = 0; $text_length > $loop; $loop++ ) {
$temp = substr( $text, $loop, 1 );
if( $temp == ' ' ) { $count = 0; }
else { $count++; }
if( $count > 30 ) { $output_text .= ' '; $count = 0; }
$output_text .= $temp;
}
echo '<table border="1" width="200"><tr><td>'. $text .'</td></tr></table>';
echo '<table border="1" width="200"><tr><td>'. $output_text .'</td></tr></table>';
?>

If you decide to use a script you may want to visit the php or javascript forums to help convert this code to javascript or clean it up a little.

[Purple Martin]

Doing it client-side with JavaScript is a good idea, as long as you don't mind that it won't work for the people who have JavaScript turned off.

[Giacomo]

Thanks, Twist. Actually your code wraps the second line at the 31st character:

twist's code output:

Here is a
really_long_string_of_text_that_I_have_written_for_this_example
below.

Here is a really_long_string_of_text_tha
t_I_have_written_for_this_examp
le below.

Here's my version:

<?php 
function wrap (&$string, $key, $chars) 
{ 
$string = substr(chunk_split($string, $chars, ' '), 0, -1); 
} 
$text = 'Here is a really_long_string_of_text_that_I_have_written_for_this_example below.';  
$arr_temp = explode(' ', $text); 
array_walk($arr_temp, 'wrap', 30); 
$output_text = implode(' ', $arr_temp); 
echo '<table border="1" width="200"><tr><td>'. $text .'</td></tr></table>';  
echo '<table border="1" width="200"><tr><td>'. $output_text .'</td></tr></table>';  
?>

output:

Here is a
really_long_string_of_text_that_I_have_written_for_this_example
below.

Here is a really_long_string_of_text_tha
t_I_have_written_for_this_exam
ple below.