logo标签列表

CSS文本溢出：嵌套div结构上的省略号包装

htmlcssoverflowword-wrap
3
我有一个包含三层嵌套div的树形结构。最外层有一个最大宽度，我希望省略号在该节点上自动换行，而不是在每个子节点上。
我已经接近实现此功能，但问题是（取决于外部宽度）内部节点没有被裁剪以适应尽可能多的文本内容。相反，只显示可以完全适配的许多子节点，其余部分则为空白。因此，我想要的是

left1~right1 left2~right2 left3~rig…

而不是

left1~right1 left2~right2…

要查看此效果，您可能需要调整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>

2个回答
4

您离预期结果非常接近。

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

0

数值是正确的...

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

正如你所说，只有当元素的内容超出其宽度时才会起作用。

那不是我认为的问题，我在宽度超过时测试了它。 - DonFuchs
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接