用文本省略号显示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属性以在它们之间分配空间。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;