javascript - 用文本省略号在同一行显示 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

您可以在父级 div 上使用 display:flex 属性来实现此目的，并且可以在子级上设置 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>