在網頁設計中，會遇到文本超過固定長度導致整體的網頁變形的情況。程序員往往需要截取固定的長度來實現某些固定長度的控制。介紹一種直接采用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這兩個屬性，往往導致頁面出現各種不同的效果；在頁面設計的時候，需要注意這些屬性在不同浏覽器的顯示效果。