显示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>