html - 用省略号制作中间跨度而不破坏图标和正确的数字

Question

我想将 ellipsis 添加到 li.text 但同时我想保留正确的 span (带数字)和距离(填充)在数字 span 和 text span 之间。

我怎样才能做到这一点？

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

预期结果:

注意429和text之间的空格。我尝试了一些，但似乎接近 429。而且无论我尝试什么，它都会因图标而中断到下一行。

Answer 1

只要您使用 inline-flex，100% 宽度就可以完美地满足您的需求:

.text {
  width: 100%;
  padding-left: 5px;
}

.right {
  width: 10%; /* remove it */
}

.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: 100%;
        padding-left: 5px;
        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>