使用CSS處理長字串

  長字串的換行顯示

對中文而言，長字串不是問題，瀏覽器本身可以正確的換行，但對於英文字元而言，就可能會突破容器的寬度，影響美觀。解決方案並不難，不過要考慮到IE和Firefox的相容問題：

<div style="width: 100px; height: 100px; border:1px solid #000000; word-wrap:break-word; overflow:hidden;">
    abcdefghijklmnopqrstuvwxyz
</div>

IE會根據word-wrap的設定正確的換行，Firefox雖然不識別word-wrap，但是會按照overflow的設定做一個權宜的處理。

在針對IE的方案中，注意儘可能使用word-wrap，而不是word-break，這是因為word-break不會處理連續的英文標點符號。

長字串的省略顯示

有的時候，在處理長字串的時候，必須保持單行，這時只能隱藏多餘的部分，並在結尾加上省略符號：

<div style="width: 100px; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;">
    one world. one dream.
</div>

IE下一切正常，但是在Firefox下，不支援text-overflow屬性，只能簡單的隱藏字串多餘的部分。

對Firefox而言，不管是word-wrap:break-word，還是text-overflow:ellipsis，都不支援。簡單的解決方案，差不多都是使用overflow:hidden隱藏一下，複雜的解決方案，有很多Hack類的方法，這裡就不累述了。