嵌套div结构下实现text-overflow: ellipsis文本溢出省略效果的问题

问题根因 #

你现在的问题是.inner设置了display: inline-block属性，行内块元素会被当作一个不可分割的整体单元处理，外层容器计算溢出时，只能完整放下一整个.inner，放不下的就会整体被隐藏，所以才会出现末尾有空白的情况。

修复方案 #

只需要修改.inner的display属性为inline即可，修改后的完整代码如下：

html, body {
  width: 100%;
}

.outer {
  background-color: lavender;
  display: inline-block;
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inner {
  /* 将原inline-block改为inline */
  display: inline;
}

.inner>* {
  display: inline;
}

.inner>:first-child::after {
  content: "~"
}

<html>
  <body>
    <div class="outer">
      <div class="inner">
        <div>left1</div>
        <div>right1</div>
      </div>
      <div class="inner">
        <div>left2</div>
        <div>right2</div>
      </div>
      <div class="inner">
        <div>left3</div>
        <div>right3</div>
      </div>
      <div class="inner">
        <div>left4</div>
        <div>right4</div>
      </div>
    </div>
  </body>
</html>

原理说明 #

display: inline的元素不会作为整体单元被截断，和普通文本的换行/截断规则一致，可以从任意字符位置断开，外层容器就能充分利用剩余宽度展示尽可能多的内容，直到最后字符位置才触发省略号效果，完全符合期望的展示效果。

内容的提问来源于stack exchange，提问作者striderhobbit