Question

我在display: inline-block;父div中有一堆display: flex;个div。当窗口变得太小时，父div溢出该行并出现水平滚动条。其中一个inline-block div包含一些长内容，因此在这种情况下，我希望此块可以折叠为overflow: ellipsis。但是，这个块从来没有在技术上溢出，因为它是父溢出的。我该如何解决这个问题？

以下是代码：

.outer {
    display: flex;
    flex-direction: row;
}

.inner {
    display: inline-block;
    flex: auto;
}

.overflowMe {
    text-overflow: ellipsis;
}

<div class="outer">
    <div class="inner">Content</div>
    <div class="inner">Content</div>
    <div class="inner overflowMe">Content</div>
    <div class="inner">Content</div>
</div>

在这个例子中，我希望类overflowMe的div在outer div溢出之前崩溃并溢出。

纯css答案首选，但js也可以接受。

Answer 1

在 .outer 容器展开后，让 .inner overflow-x: hidden，text-overflow: ellipsis和white-space: nowrap;

＆＃13;

body {
  width: 100vw;
  height: 100vh;
  margin: 0px;
}

.outer {
  display: flex;
}

.inner {
  background: gold;
  padding-right: 5px;
  padding-left: 5px;
}

.overflowMe {
  overflow-x: hidden;
  text-overflow: ellipsis;
  background: skyblue;
  white-space: nowrap;
}

＆＃13;

<div class="outer">
  <div class="inner">Content</div>
  <div class="inner">Content</div>
  <div class="inner overflowMe">Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content</div>
  <div class="inner">Content</div>
</div>

＆＃13;

当父进程溢出时，触发子进程溢出

1 个答案: