多文本省略的拓展【CSS黑魔法】——多文本截断显示更多

网上一搜，多文本省略有好多方案，可是都没有我想要的效果。把其他有名网站都看了一遍，还是没有...

多文本截断，然后换行显示更多

想要的效果应该是这样的：

 

你们或许会说，用JS就搞定了，但是我的宗旨是能用CSS就尽量不要用JS。。。。最后，我还是想到了CSS黑魔法：

代码实现如下：

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>多文本截断显示更多</title>
    <style type="text/css">
    html,body,p,div{
        margin:0;
        padding:0;
    }
    .text{
        position:relative;
        padding:0 10px;/* 上下不能有padding */
        font-size: 14px;
        line-height: 18px;
        color:#333;
        background:#fff;
        max-height:198px;
        overflow: hidden;
    }
    .more{
        position: absolute;
        top:0;
        left:10px;
        z-index:10;
        width:100%;
    }
    .more span{
        position: absolute;
        top:180px;/* 10行截断，这里就是10*18(行高)+18 */
        left:0;
        width:100%;
        height:18px;
        color:#3696f1;
        text-decoration: underline;
        line-height: 18px;
        background:#fff;
    }
    </style>
</head>
<body>
<div class="text">
<div class="more"><span>More</span></div>
Ek Aadmi Office Ke Baad Apni Patni Ko Bina Bataye Ek Party Mein Chala Gaya.<br>Patni Poore Gusse Se Apne Baccho Ko Kehti Hai: “Agar Tumhare Daddy Aaye To Tumne Darwaja Nahi Kholna.”<br>Raat Ko 12 Baje Ke Baad Aadmi Aaya Aur Door Bell Bajayi.<br>Patni Ki Andar Se Awaaz Aayi: “Jaao Wahin Jahan Se Aaye Ho.”<br>Aadmi Ne Bahar Se Awaaz Lagayi: “Main Ghar Par Sone Ke Liye Nahi Aaya, Wo Party Mein Bohat Saari Ladkiyan Hain Isliye Bas Mujhe Mere Condoms De Do, Drawer Mein Pade Hain.<br>Patni Ne Darwaja Khola Aur Pati Ko Andar Kheench Liya.<br>Patni: “Tum Kahin Nahi Jaa Rahe, Yahin Rahoge Aur Main Tumhe Abhi Sota Hua Dekhna Chahti Hun.”
Ek Aadmi Office Ke Baad Apni Patni Ko Bina Bataye Ek Party Mein Chala Gaya.<br>Patni Poore Gusse Se Apne Baccho Ko Kehti Hai: “Agar Tumhare Daddy Aaye To Tumne Darwaja Nahi Kholna.”<br>Raat Ko 12 Baje Ke Baad Aadmi Aaya Aur Door Bell Bajayi.<br>Patni Ki Andar Se Awaaz Aayi: “Jaao Wahin Jahan Se Aaye Ho.”<br>Aadmi Ne Bahar Se Awaaz Lagayi: “Main Ghar Par Sone Ke Liye Nahi Aaya, Wo Party Mein Bohat Saari Ladkiyan Hain Isliye Bas Mujhe Mere Condoms De Do, Drawer Mein Pade Hain.<br>Patni Ne Darwaja Khola Aur Pati Ko Andar Kheench Liya.<br>Patni: “Tum Kahin Nahi Jaa Rahe, Yahin Rahoge Aur Main Tumhe Abhi Sota Hua Dekhna Chahti Hun.”
Ek Aadmi Office Ke Baad Apni Patni Ko Bina Bataye Ek Party Mein Chala Gaya.<br>Patni Poore Gusse Se Apne Baccho Ko Kehti Hai: “Agar Tumhare Daddy Aaye To Tumne Darwaja Nahi Kholna.”<br>Raat Ko 12 Baje Ke Baad Aadmi Aaya Aur Door Bell Bajayi.<br>Patni Ki Andar Se Awaaz Aayi: “Jaao Wahin Jahan Se Aaye Ho.”<br>Aadmi Ne Bahar Se Awaaz Lagayi: “Main Ghar Par Sone Ke Liye Nahi Aaya, Wo Party Mein Bohat Saari Ladkiyan Hain Isliye Bas Mujhe Mere Condoms De Do, Drawer Mein Pade Hain.<br>Patni Ne Darwaja Khola Aur Pati Ko Andar Kheench Liya.<br>Patni: “Tum Kahin Nahi Jaa Rahe, Yahin Rahoge Aur Main Tumhe Abhi Sota Hua Dekhna Chahti Hun.”
</div>
</body>
</html>

 

github传送门：https://github.com/JoyHo/ellipsis_more/blob/master/ellipsisMore.html

posted @ 2016-06-08 15:40  Joy Ho  阅读(797)  评论(0)  编辑  收藏  举报