I’ve been doing research on how to wrap texts. First solution I found was giving the CSS property word-wrap the value break-word:
word-wrap: break-word
But this didn’t work in Firefox.
In some forum, some suggested the use of overflow-x:auto:
<div style=”width:80px; overflow-x:auto;”>
Pneumonoultramicroscopicsilicovolcanoconiosis
</div>
But it doesn’t look good, does it?
Then I came across this blog entry. The author used the following PHP code to add a zero-width character to every character that is not a number or letter:
<?php
$url = preg_replace('/([^a-zA-Z0-9])/', "$1", $url);
?>
It worked for me after tweaking the code a bit. I removed the tilde (^) sign:
<?php
$url = preg_replace('/([a-zA-Z0-9])/', "$1", $url);
?>
With this, the zero-width character is inserted after every letter and number, allowing a long text wrap in its container.
Example:
<?php
$longtext = "Pneumonoultramicroscopicsilicovolcanoconiosis";
$longtext = preg_replace('/([a-zA-Z0-9])/', "$1", $longtext);
?>
<div style="width:100px;background:#cccccc;">
<?php echo $longtext ?>
</div>
It’s all thanks to the guy who posted this blog entry. 🙂
Edit: I found out that the wrapping using PHP helps only for the display, but not when you need to copy the displayed text and paste it somewhere like notepad. The zero-width characters would appear in between every character displayed.
