1

我有一个inline-flex容器，里面有两个必须展开（不换行）的内部块。

在第二个块中，有另一个inline-flex容器，其中包含两个不能包装其内容的内部inline-blocks 。

我需要的

是显示text-overflow: ellipsis最顶部容器 ( div.width) 的宽度不足以将所有内部块显示为 时white-space: nowrap。

的内容div.width 不能溢出它的容器，以防a链接的内容太长。

片段

.splitbutton {
  display: inline-flex;
  border: 4px solid violet;
}

.default {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.default a {
/*  white-space: nowrap; */
}

.button {
  background-color: green;
  padding: 5px;
}

.container1 {
  white-space: nowrap;
}

.container1,
.container2 {
  flex: 1 1 auto;
  border: 3px double green;
}

.width {
  border: 3px solid red;
  /*width: 350px;*/
    
  display: inline-flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
<div class="width">
  <div class="container1">
    <span>Any kind of inline text</span>
  </div>
  <div class="container2">
    <div class="splitbutton">
      <div class="default">
        <a href="#" title="Looooooooooooong text with many many spaces and letters">Looooooooooooong text with many many spaces and letters</a>
      </div>
      <span class="button">button</span>
    </div>
  </div>
</div>

笔记

  • 当前的块都不能指定特定的固定宽度！
  • 按钮必须始终保持可见（省略号最终应应用于a链接元素）。
4

0 回答 0