解決內容溢出問題（比如說文章列表很長，而其寬度又受到限制，此時超出寬度的內容就會以（...）顯示）：text-overflow
1、clip:表示不顯示省略標記(...)，而只是簡單的裁切，需要在一定的高度范圍內配合overflow:hidden屬性使用，如果不配合的話將無任何效果；
2、ellipsis：對象文本溢出時將顯示省略標記(...)，需要配合overflow:hidden；white-space:nowrap一起使用才會有效果。
text-overflow:clip所有瀏覽器都支持，但是text-overflow:ellipsis只有Firefox不支持，但有一些方法可以 兼容解決這個問題，這個問題后面在來一起討論，我們先從簡單的開始。text-overflow:ellipsis應用在Opera瀏覽器下時，需要加上 其前綴“-o-”。
.text-overflow-clip { text-overflow: clip; overflow: hidden; height: 50px; }
text-overflow:clip這個屬性在我們實際應用中根本是沒有任何意義的，因為他離開了height和overflow無任何效果，當他有這 兩個屬性配合時，達到的效果跟我們設置overflow:hidden效果一樣，無任何區別，因此我們在實際應用中完全可以使用 overflow:hidden來實現這樣的效果。換句簡單的話說：單獨的text-overflow:clip起不到任何截切效果。
text-overflow:clip這個屬性在我們實際應用中根本是沒有任何意義的，因為他離開了height和overflow無任何效果，當他有這 兩個屬性配合時，達到的效果跟我們設置overflow:hidden效果一樣，無任何區別，因此我們在實際應用中完全可以使用 overflow:hidden來實現這樣的效果。換句簡單的話說：單獨的text-overflow:clip起不到任何截切效果。
text-overflow:ellipsis在配合overflow:hidden；white-space:nowrap屬性可以用來代替標題截取函 數，這樣一來有助於搜索引擎，打個比方說，我們標題有20個字符，而其寬度只能設置100px，如果采用標題的截取函數，那么這個標題就顯示不夠完整，要 是我們使用text-overflow:ellipsis，標題輸出是完整的，只不過是受到了其元素容器大小限制無法全部顯示出來，此時就用(...)代 替了被隱藏的部分。換句說，text-overflow:ellipsis屬性只起到一個注解作用；
.text-overflow-ellipsis { -o-text-overflow: ellipsis; text-overflow: ellipsis; height: 30px; overflow: hidden; white-space: nowrap; //讓文本不換行，讓文本內容強制性在同一行 }