css實現單行,多行文本溢出顯示省略號……


1.單行文本溢出顯示省略號我們可以直接用text-overflow: ellipsis

實現方法:

<style>
 .div_text{width: 300px; padding:10px;border:1px solid #001F33; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
</style>
<div class="div_text">
    單行文本溢出顯示省略號,單行文本溢出顯示省略號
</div>

效果如圖:

2.多行文本溢出,我們可以使用WebKit的CSS擴展屬性,該方法適用於WebKit瀏覽器及移動端

實現方法:

<style>
.div_moreline{width: 300px; padding:10px;border:1px solid #001F33;margin-top: 20px;display:-webkit-box;-webkit-box-orient: vertical;
-webkit-line-clamp: 3;overflow: hidden; line-height: 30px; max-height: 90px;}
</style>
<div class="div_moreline">
    多行文本溢出,我們可以使用WebKit的CSS擴展屬性,該方法適用於WebKit瀏覽器及移動端。多行文本溢出,我們可以使用WebKit的CSS擴展屬性,該方法適用於WebKit瀏覽器及移動端。
</div>
/*
display:-webkit-box;將對象作為彈性伸縮盒子模型顯示 
-webkit-box-orient:vertical;設置或檢索伸縮盒對象的子元素的排列方式 。
-webkit-line-clamp:3;設置顯示多少行
*/

效果如圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM