は、私はAEDと同じラインで省略記号を表示したいテキスト省略記号

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>

と2つのテキスト同じ行を表示します。これを達成する方法。事前

で

おかげ

Answer 1

あなたはこれを達成するために、親divにdisplay: flexプロパティを使用することができますし、それらの間のスペースを分配する子どもたちにflexプロパティを設定することができます。テキストAEDでdivの上の位置を使用していないのはなぜ

.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>