byteC0de byteC0de - 1 month ago 8
Javascript Question

Show 2 texts same line with text-ellipsis



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





I want to show the AED and the ellipsis in the same line. How to achieve this.

Thanks in advance

Answer Source

You can use display: flex property on parent div to achieve this and can set flex property on children to distribute space between them.

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