親測，可用：m2maomao 2011.06.29

在網頁設計中，會遇到文字超過固定長度導致整體的網頁變形的情況。程式設計師往往需要擷取固定的長度來實現某些固定長度的控制。介紹一種直接採用CSS的程式碼控制來實現文字擷取的方法。與程式設計師的直接字元擷取的方式有點區別，其優勢是可以自動控制文字顯示的長度；缺點是不同瀏覽器的相容性並不完美。使用到 overflow，text-overflow，white-space 這三個主要的屬性，其他的程式碼屬於修飾作用。

    CSS程式碼：
    <style>
    .texthidden{
     width:200px;
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap;
     border:1px solid #ddd;}
    </style>

    HTML程式碼：
    <div class="texthidden">
    CSS讓容器的溢位部分內容隱藏起來
    </div>

程式碼分析：
1. width:200px; //指定寬度：
2. overflow:hidden;  //將超出內容隱藏
3. text-overflow:ellipsis; //IE專用屬性，文字溢位時顯示省略標記()；其他瀏覽器不支援。
4. white-space:nowrap; //強制內容不換行。強制在同一行內顯示所有文字，直到文字結束或者遭遇 br 元素

    目前使用這種方法比較成功的示例是Gmail的內容顯示，在IE下達到最好的效果。如果是FF那就比較糟糕，總是會出現擷取半個中文的效果。其中涉及到最主要的原因是 text-overflow 這個屬性只在IE下有效，目前很多CSS屬性也存在這個問題，特別重要的是Margin和Padding這兩個屬性，往往導致頁面出現各種不同的效果；在頁面設計的時候，需要注意這些屬性在不同瀏覽器的顯示效果。