CSS 文本溢出：省略号环绕嵌套 div 结构

Question

我有以下 3 级嵌套 div 树。外层有一个最大宽度，我希望省略号环绕在那个节点上，而不是在各个子节点上。

我已经快到了，问题是（取决于外部宽度）内部节点没有被切割以适应父节点内尽可能多的文本。相反，只显示完全适合的子节点数，其余的只是空白 space。所以而不是

left1~right1 left2~right2…

我比较喜欢

left1~right1 left2~right2 left3~rig…

要查看此效果，您可能需要调整 max-width 的值。

html, body {
  width: 100%;
}

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

.inner {
  display: inline-block;
}

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

Answer 1

您非常接近您的预期结果。

将 .inner 从 inline-block 更改为 inline。

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

Answer 2

值是正确的...

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

正如您所说，只有当您的元素的内容超过它的宽度时才会起作用。

CSS 文本溢出：省略号环绕嵌套 div 结构

CSS text-overflow: ellipsis wrapping on nested div structure

html

css

overflow

word-wrap