顯示2個文本同一行與文本的省略號

.parent{ 
 
    width:100px; 
 
} 
 
.ellipsis{ 
 
    text-overflow: ellipsis; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
    <div class="ellipsis">Lorem ipsum dolor sit amet.</div> 
 
    <div>(AED)</div> 
 
</div>

我想說明的AED，並在同一行的省略號。如何實現這一點。

在此先感謝

來源

2017-08-17 byteC0de

你爲什麼不使用與文本AED股利相對位置？ – Vivz

@Vivz位置相對不起作用 – byteC0de

您可以使用display: flex財產上的父div實現這一點，可以對孩子設置flex屬性在它們之間分配空間。

.parent{ 
 
    width:100px; 
 
    display: flex; 
 
} 
 
.ellipsis{ 
 
    text-overflow: ellipsis; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
    <div class="ellipsis">Lorem ipsum dolor sit amet.</div> 
 
    <div>(AED)</div> 
 
</div>

來源

2017-08-17 16:09:59 rmalviya

顯示2個文本同一行與文本的省略號

回答

相關問題