网页中超长文字的断行问题

网页中超长文字的断行问题2006/9/25 at 01:50 · PHP, XHTML&CSS

这个应该是比较常见的问题了，通常是连续的一长串无空格的半角字符所引起的，比如比较长的超链接就很有可能把你的页面撑开。网上常见的解决办法就是使用css属性 break-word:break-all; ，但是这个只对IE浏览器有效。

下面介绍一种办法，可以保证各浏览器的兼容。

<wbr>标记，它的作用是建议浏览器在这个标记处可以断行，只是建议而不是必定会在此处断行，还要根据整行文字长度而定。因此只要在连续的文字中间适当的插入若干<wbr>标记就能解决断行问题。

我最初看到这个解决办法是在Gmail的代码中，它是这么实现的:(All rights reserved by Google.)

JS实现
function HtmlEscapeInsertWbrs(str, n, chars_to_break_after,
                              chars_to_break_before)
{
    var out = '';
    var strpos = 0;
    var spc = 0;
    for (var i = 1; i < str.length; ++i) {
        var prev_char = str.charAt(i - 1);
        var next_char = str.charAt(i);
        if (IsSpace(next_char)) {
            spc = i;
        } else {
            if (i - spc == n
            || chars_to_break_after.indexOf(prev_char) != -1
            || chars_to_break_before.indexOf(next_char) != -1)
            {
                out += HtmlEscape(str.substring(strpos, i))
                      + '<wbr>';
                strpos = i;
                spc = i;
            }
        }
    }
    out += HtmlEscape(str.substr(strpos));
    return out;
}
/////
function IsSpace(ch)
{
    return (" trn".indexOf(ch) >= 0);
}
function HtmlEscape(str){
    return
        str.replace(/&/g,"&amp;").replace(/</g,"&lt;")
        .replace(/>/g,"&gt;").replace(/\"/g,"&quot;");
}
说明： 函数已经帮你处理了Html敏感的符号(&<>),用了这个函数并不是说字符串显示的时候就会在某个点断行，只是在其中设置了可能的断行点(<wbr>)标记，在显示宽度不够的时候的情况下才指示浏览器做出断行。


用法： 参数说明
str： 你要处理的原始字符串
n: 每行最多多少个字符
chars_to_break_after: 一个字符串，比如"-:_",就会在这些字符后面发生断行(如果有断行必要) 如果不需要特别设置，那么使用空字符串 ""就行了

chars_to_break_before: 功能类似于上面这个， 没有特殊需要就设置成 "" 就可以了

函数是JavaScript的实现， 我根据这个做了一个PHP的实现，它工作得很好。

PHP实现
/*
* support UTF-8 only,
* ** the function return HTML Format string **
*/
function HtmlEscapeInsertWbrs($str, $n=10,
         $chars_to_break_after='',$chars_to_break_before='')
{
    $out = '';
    $strpos = 0;
    $spc = 0;
    $len = mb_strlen($str,'UTF-8');
    for ($i = 1; $i < $len; ++$i) {
      $prev_char = mb_substr($str,$i-1,1,'UTF-8');
      $next_char = mb_substr($str,$i,1,'UTF-8');
      if (_u_IsSpace($next_char)) {
        $spc = $i;
      } else {
        if ($i - $spc == $n
         || mb_strpos( $chars_to_break_after,
            $prev_char,0,'UTF-8' ) !== FALSE
         || mb_strpos( $chars_to_break_before,
            $next_char,0,'UTF-8')  !== FALSE )
          {
            $out .= HtmlEscape(
                mb_substr($str,$strpos, $i-$strpos,'UTF-8')
                       ) . '<wbr>';
            $strpos = $i;
            $spc = $i;
          }
      }
    }
    $out .= HtmlEscape(
             mb_substr($str,$strpos,$len-$strpos,'UTF-8')
               );
    return $out;
}
/////
function _u_IsSpace($ch)
{
  return mb_strpos(" trn",$ch,0,'UTF-8') !== FALSE;
}
function HtmlEscape($s)
{
  return htmlspecialchars($s);
}
同样，该函数会对传入的字符串中的特殊字符做转义处理(htmlspecialchars())，因此传入的字符串必须是原始的(未经htmlspecialchars()处理过的),函数返回后的结果可以直接在网页中输出。
参数使用方法跟上面的JS版本类似，我就不罗唆了。

你可以改写成其他语言的，到时候也记得发给我一份