[分享] 解決網頁長文字破版現象

網頁前端處理，最常碰到的事情就是『破版』，會因為樣式問題導致許多破版的狀況產生。這邊所提到的就是在『英數連續長字串』會發生的破版現象，並解說如何解決。

首先讓我們看一下怎麼樣的情況會破版。

前提，文字內容為英數連續長字串，在紅色div寬度限制下，會凸出來一大塊，這想必不是我們所樂見的，因此需要做些改進，這邊就介紹一下改進的方式。




後端擷取字串
預先設定好可容許字元數量，當字串超過長度的時候，就採取擷取字串的方式，只讓部份內容顯示出來，其餘內容斷字，或者是隱藏。

<?php
$str = "HelloEverybodyIamClonnThisIsATestWordWrap";
echo (mb_strlen($str) > 10) ? mb_substr($str, 0, 10, 'UTF-8') . "..." : $str;
?>

範例限制字元長度為10，超過多餘的字顯示『...』，沒有超過就直接完整字串顯示，可前後比對顯示狀態。

寬度限制，高度不限
當資料需要完成顯示，但是又要限制寬度的時候就可以採用CSS的其中一個樣式word-wrap，這邊採用的屬性為break-word，經過實測之後IE8, Chrome, Firefox , Safari, Opera都有很好的顯示效果，而文字內容會依照寬度限制，不斷地長高。

word-wrap: break-word;

高度寬度皆限制顯示
這個時候也是會將部份資料隱蔽，與上個樣式描述差異在於，需要增加高度限制，設定超過時隱蔽(overflow屬性)

border: 1px solid #f00;
overflow: hidden;
height: 2.5em;
word-wrap: break-word;

需要預設寬度和高度，又設定word-wrap之後，可以讓顯示侷限於div寬高當中，當然就會有某些資訊被隱藏，這其中還是有些取捨。

text-overflow ellipsis;

另外，text-overflow也可以用來取代word-wrap，過長之後會顯示...，唯一缺點是Firefox不支援。

範例連結

結論
文字導致破版，目前來看還是有些取捨，並沒有一定的解法，勢必要看版面如何製作而定，當然可以使用javascript搭配hover效果來達到一些不錯的機制，這邊主要拋出一個常見的問題，並且提出目前我們所採取的作法有哪些，也希望聽到大家的聲音，看看每個人對於字串的作法會是怎麼處理。

最後感謝同事提出來這個問題的解決方式，本人將資料重新編寫之後分享給各位！