html - Pure-CSS - 如果文本不适合 div，则完全隐藏文本

Question

在我的示例中，有一个图表，其中有一个改变其宽度的水平条。该条的图例显示在内部，但只要有足够的空间完全显示字符串，就应该可见。

我试图调整父容器（栏，改变宽度），因此具有以下属性：
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；

这是代码笔：https ://codepen.io/DerLukas/pen/VwvBbEN

在此示例中，不应显示字符串“BASE”，因为它不适合白条。

示例图片

<div id="modeChart">
  <div class="bar">
    <p class="label">BASE</p>
  </div>
</div>