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

网页中超长文字的断行问题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,"&").replace(/</g,"<")
.replace(/>/g,">").replace(/\"/g,""");
}
说明： 函数已经帮你处理了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版本类似，我就不罗唆了。

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