html - 如何在单行中显示两个相邻的字符串，其中右侧的字符串始终完全可见，如果太长，则左侧的字符串会被截断？

Question

在我动态生成的 HTML 页面上，我有一个宽度有限的 DIV 容器。在其中，有几行 (DIV) 显示“名称”和“值”对（两个相邻的 SPAN）。这是它目前的样子：

“值” SPAN 具有“float:right”，因此它们与容器边缘右对齐。

我需要您在以下方面的帮助：

如果“名称”加上“值”SPAN 的总宽度大于容器的宽度，我需要“值”始终完全可见并且“名称”被截断（最好使用省略号）。任何东西都不应该换到下一行。

因此，例如，如果“occupancy_timeout”的值为“123456789”，我需要将这一行显示为“occupancy_tim...123456789”。

如果这可以通过另一种方式更轻松地完成（即在单行 DIV 中不使用两个 SPAN），那也是完全可以接受的。

标签： htmlcss

Answer 1

因为我display: flex在我的解决方案中使用了，所以我使用margin-left: auto而不是float: right并且我假设max-width: 160px. 您可以使用自己的值。

.wrapper{
  max-width: 160px;
}
.inner{
  display: flex;
}
.right{
  margin-left: auto;
}
.left{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class='wrapper'>
  <div class='inner'>
    <span class='left'>Name</span>
    <span class='right'>Value</span>  
  </div>
  <div class='inner'>
    <span class='left'>id:</span>
    <span class='right'>123456789012345678</span>  
  </div>
  <div class='inner'>
    <span class='left'>occupancy_timeout</span>
    <span class='right'>10000</span>  
  </div>
  <div class='inner'>
    <span class='left'>led_indication</span>
    <span class='right'>true</span>  
  </div>
</div>