PHP: 文字過長加入 WBR tag function

在開發網頁上的程式會有很多的莫名奇妙的錯誤發生,例如說有 IE cache 的 bug,有人網址到處亂貼,有人英數字就喜歡長長的打一整排, 然後版面會被撐開變亂。

為了這些問題,總是得用一堆很 dirty 的方法來解決,ex: 遇到 IE cache 就加個 timestamp 之類的, 讓他不會 cache, 遇到英數字長長一排, 讓版面亂掉的, 就用以下此方法(WBR)來解決。

<WBR>基本上是類似<br>的語法,不接受任何屬性設定,也沒有對應的結尾標籤,一般的使用方法如下:

<nobr>This is a really super-duper, extremely long run of no<>break
text which should be broken only where we tell it to</nobr>

有人輸入一長串的連續數字,造成整個頁面過長,造成版面被撐開。在IE裡面,你可以使用word-break屬性來強制換行,不過這個屬性FireFox卻不認得,為了讓FF也能夠強制換行,<wbr>是你可以選擇的方式。

解決換行的方法,你可以在每10個字後面加上<wbr>,或加個空白也行( ),但空白加進去會有點怪,就能在該斷的時候斷行,不該斷的時後仍維持一整行,<wbr>不過在IE5當中,<wbr>看來似乎必須在<nobr>標籤當中才可以作用。關於 更多的資訊以及瀏覽器測試狀況請參考The wbr tag以及<wbr>

WBR 的作用:you can break HERE if you want,就是說瀏覽器會判斷是否此處已經在最邊框,若已經在最邊框,有 <wbr>的 tag 的話就會斷行,否則就不會(這也是為何不用 <br> 而要使用 <wbr> 的原因)。

此種狀況會發生的情況只有以下幾種:

  • 整串數字(沒有任何空格)
  • 整串英文(沒有任何空格)
  • 整串 英文、數字、點 混合(ex: url)

此問題是 broswer 判斷的問題,在你沒有任何空白分隔的狀況下,broswer 也不敢給你亂斷行,若你那是一個單字,ex:i18n,被斷行了,在讀的時後就蠻奇怪的。而此問題對中文和正常的英文文章不會有此問題,中文瀏覽器可以自行判斷,英文可以依照空白分格來辨認多長是一個單字.

在此寫一個 function,在輸出的時後透過此 function 來做輸出動作,就可以解決此問題。


function insWBR($str, $number = 30){
$pattern = "/([\w|\d|\.]\{$number})/";
$replacement = "\\1<wbr>";
return preg_replace($pattern, $replacement, $str);
}

使用方法:

echo insWBR($output, 20); // 每連續20個英數字加一個 wbr tag

PS: 若不想斷行,可以考慮另一個相反的 tag: <NOBR>,來包住輸出的字,就不會被瀏覽器斷行。

Advertisements

3 thoughts on “PHP: 文字過長加入 WBR tag function

  1. 經過測試,firefox 對於許多字元都無法自動斷行,因此將程式擴充如下,提供作參考:

    function insWBR($str, $number = 70)
    {
    // 因為 2008/1 為止,firefox 的自動斷行在一大串連續英文時無法作用,因此以此函式自動斷行
    $pattern = “/([\w|\d|\.|\`|\~|!|\@|\#|\$|\%|\^|\&|\*|\)|_|\+|\-|=|\[|\]|\\|\{|\}|\||\;|\’|:|\”|\/|\|\?|\/|\,|(1)|(2)|(3)|(4)|(5)|(6)|(7)|(8)|(9)|(0)]{“.$number.”})/”;
    $replacement = “$1”;
    return preg_replace($pattern,$replacement,$str);
    }

  2. 另外,由於簡繁體甚至 UTF-8 同在文中時,有的中文可能是以 达 或 %3A%E4 之類的方式儲存,若被強制加入 ,在某些瀏覽器顯示會有問題。

    因此實際在判斷時可以省略 % 及 & 兩個字元,即可避免這種問題。代價是若有人留很長的 % 或 & 就擋不到了。其實有更好的判斷法,甚至判斷 unicode 等,不過就須要更複雜的判斷。

    再者,可在遇到 firefox 時才呼叫此函式:
    if(eregi(“Firefox”,$_SERVER[“HTTP_USER_AGENT”])){}

  3. 感謝您的補充程式,David說的沒錯,FF至今其實還無法支援一大串英數文字自動斷行,這真的是很麻煩的狀況。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s