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

Question

.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，並在同一行的省略號。如何實現這一點。

在此先感謝

Answer 1

您可以使用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>