如何使用wordwrap或其他方法来破坏文本以适应流体宽度div

Question

I have a div which has a fluid width, thus I cannot predict its size in PHP. If someone enters a long string which isn't delimited by spaces anywhere, the browser will stretch the page, and that gets quite annoying rather quickly. I have tried to use the wordwrap function for this, but I can never find the proper width and I am having issues with output.

Here's what I am trying, based on a comment left on the documentation page for wordwrap:

<?php
//Using &#8203; here allows the browser to break the line of text, without the visual distraction. 
$line = wordwrap($line, 10, "&#8203;", true);
?>

The comment goes on to explain how it's a Zero Width Space character, which will tell the browser it is free to break but doesn't show up.

I'm sure you can already see the two problems which have arisen. It will replace normal spaces with that zero width space as well, so I wind up with things like: This is a​test.​Hello,​Stackoverf​low! This​ought to​trigger a​couple of​breaks.

I also coded a small bbcode parser for this, and it also breaks my html output since it cuts the tags.

On the plus side, incredibly long words are broken as expected!

I've tried setting various overflow properties on the div in CSS, but none of them function as expected.

Answer 1

There is a CSS property of:

word-wrap: break-word;

Otherwise if you want to keep this PHP, Idealy you only want to apply a break on words with character counts greater than X, This will split the string on the space and apply a check to each word. You may run into problems with links, but you could easily check for starting url characters or apply a regex.

$text = 'this text is fine but waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaay long stuff gets broken waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaay  up into bits';

if($array = explode(' ',$text) and is_array($array))
{
  foreach($array as $key => $value)
  {
    if(strlen($value) > 10)
      $array[$key] =  wordwrap($value, 10, "­", true);
  }
  $text = implode(' ',$array);
}

echo $text;

In this example words with a length greater than 10 are then word wrapped with the ­ character, which is pretty useful as it produces a soft hyphen on breaks. Replace it with your breaking character if you would perfer no additional hyphens. You can also try the word wrap with a lower number than the max length before breaking, IE strlen > 20, word wrap at 10

Sample: http://i.imgur.com/fKINR.png