關(guān)于字體隱藏的樣式處理問(wèn)題

如圖：我需要做一個(gè)標(biāo)題盒子，在元素內(nèi)容后還要包含一個(gè)星級(jí)行內(nèi)塊。
問(wèn)題來(lái)了，標(biāo)題正文字?jǐn)?shù)不定，假如做超出字體隱藏并末尾加上'...'表示省略，那又如何把末尾的星級(jí)行內(nèi)塊填上，且行內(nèi)塊的寬度剛好合適？
不知道我的意思有沒(méi)有表達(dá)清楚，換言之，認(rèn)為如果單單靠：

.p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    }
    //換行，超出兩行隱藏超出部分，并以'...'顯示

html：
<p>
    <lable>行業(yè)分類(lèi)</lable>標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)
    <a><i></i><i></i><i></i><i></i><i></i></a>
</p>

這樣的方式是無(wú)法實(shí)現(xiàn)如圖中的功能的，圖中的星級(jí)盒子明顯是定位到右下角，那么如何實(shí)現(xiàn)如圖的樣式呢？

回答

編輯回答

避風(fēng)港

第一個(gè)效果圖:

思路：整個(gè)標(biāo)題父元素相對(duì)定位，星星父元素 a 絕對(duì)定位
結(jié)果：但是這樣沒(méi)有本質(zhì)上實(shí)現(xiàn)題主的需求，也就是超出部分用省略號(hào)表示；
第二個(gè)效果圖：

這次接近了，但還是不行，第一行文字沒(méi)有辦法走到底，坐等大神修補(bǔ)，代碼如下：
html:

    <p>
        <label>行業(yè)分類(lèi)</label>
        <a><i></i><i></i><i></i><i></i><i></i></a>標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)標(biāo)題內(nèi)容，可能會(huì)很長(zhǎng)
        
    </p>

css:

    p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;  
        overflow: hidden;
        width: 200px;
        height: 80px;
        background-color: silver;
        line-height: 40px;
        position: relative;           
    }

    p label {
        background-color: lightgreen;
        margin-right: 20px;
        display: inline-block;      
    }

    p a {
        display: block;
        width: 70px;
        height: 40px;
        background-color: yellow;
        float: right;
        margin-top: 40px;
        overflow: hidden;
    }

2017年8月10日 17:09