I am looking to incorporate ellipsis into li.text, while still maintaining the presence of the right span (which contains numbers) and the spacing (padding) between the number span and the text span.
Is there a way to achieve this?
.right {
float: right;
padding: 0 8px;
}
.menu {
width: 155px;
border-right: 1px solid #ccc;
list-style-type: none;
}
body {
font-family: "Segoe UI", "Open Sans", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none
}
.p {
width: 155px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 45%;
padding-right: 16px;
}
.right {
width: 10%;
}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<ul class="menu">
<li class="" data-action="switchFolder" data-sign-in="false" id="inbox">
<a href="javascript:void(0);">
<div class="p">
<i class="icon ion-ios-filing-outline"></i>
<span class="text">This is a very long element that wil exceed limit</span>
<span class="right">429</span>
</div>
</a>
</li>
</ul>Expected outcome:
https://i.sstatic.net/wG6gc.png
Please note the spacing between 429 and text. I have made several attempts but it seems that they end up too close to the 429. Also, no matter what I try, it keeps breaking to the next line because of the icon.