Empty Title

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