CSS文本溢出處理方式

1. 單行文本溢出省略號效果

.ellipsis {
　　overflow:hidden;
　　white-space:nowrap;
　　text-overflow:ellipsis;
}

<div class="ellipsis">
　　這時我看見他的背影，我的淚很快地流下來了。我趕緊拭干了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了朱紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，自己慢慢爬下，再抱起橘子走。到這邊時，我趕緊去攙他。他和我走到車上，將橘子一股腦兒放在我的皮大衣上。於是撲撲衣上的泥土，心里很輕松似的。過一會兒說：“我走了，到那邊來信！”我望着他走出去。他走了幾步，回過頭看見我，說：“進去吧，里邊沒人。”等他的背影混入來來往往的人里，再找不着了，我便進來坐下，我的眼淚又來了。
</div>

 

效果：

 

2. 指定N行文字溢出省略號效果（以4行為例）----因使用了WebKit的CSS擴展屬性，適用於WebKit瀏覽器及移動端

.ellipsis_four {
　　display:-webkit-box; // 必須結合的屬性，將對象作為彈性伸縮盒子模型展示
　　-webkit-line-clamp: 4; // 需要結合其他屬性來使用才有效果
　　-webkit-box-orient: vertical; // 必須結合的屬性，設置子元素(在這里指文字)的排列方式
　　overflow: hidden;
}

<div class="ellipsis_four">
　　這時我看見他的背影，我的淚很快地流下來了。我趕緊拭干了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了朱紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，自己慢慢爬下，再抱起橘子走。到這邊時，我趕緊去攙他。他和我走到車上，將橘子一股腦兒放在我的皮大衣上。於是撲撲衣上的泥土，心里很輕松似的。過一會兒說：“我走了，到那邊來信！”我望着他走出去。他走了幾步，回過頭看見我，說：“進去吧，里邊沒人。”等他的背影混入來來往往的人里，再找不着了，我便進來坐下，我的眼淚又來了。
</div>

效果：

3. 文字溢出其他處理效果（需要配合js使用，否則不管文字多少，都會顯示“查看全文”）

.ellipsis_all {
　　position: relative; // 相對定位，為了讓“查看全文”絕對定位到右下角
　　overflow: hidden;
　　max-height: 82px; // 指定盒子高度
　　line-height: 21px; // 指定盒子內文字的行高，防止一行文字只出現一半的情況
　　border: 1px solid red;
}
.ellipsis_all:after {
　　content: "查看全文";
　　color: blue;
　　position: absolute;
　　bottom: 0;
　　right: 0;
　　padding-left: 40px;
　　height:21px;
　　line-height: 26px;
　　background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 1) 35%, #fff 100%); // 加此漸變背景避免文字值顯示一半
　　background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 1) 35%, #fff 100%);
　　background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 1) 35%, #fff 100%);
　　background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 1) 35%, #fff 100%);
}
<div class="ellipsis_all">
　　這時我看見他的背影，我的淚很快地流下來了。我趕緊拭干了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了朱紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，自己慢慢爬下，再抱起橘子走。到這邊時，我趕緊去攙他。他和我走到車上，將橘子一股腦兒放在我的皮大衣上。於是撲撲衣上的泥土，心里很輕松似的。過一會兒說：“我走了，到那邊來信！”我望着他走出去。他走了幾步，回過頭看見我，說：“進去吧，里邊沒人。”等他的背影混入來來往往的人里，再找不着了，我便進來坐下，我的眼淚又來了。
</div>

效果：