CSS 面包屑布局

Question

我正在尝试创建一个面包屑导航（按钮后跟一个跨度）供用户导航目录结构。我想在具有以下属性的水平布局中提供它：

1. 如果所有按钮/文本都有足够的空间，则以所需的最小宽度显示所有按钮（例如，按钮尽可能纤细）。
2. 一旦所有按钮/文本不再有空间，则开始仅折叠按钮。这种折叠最好与每个按钮的大小成比例。
3. 一旦所有按钮都折叠到某个最小宽度，然后开始折叠最终跨度。

我可以完全控制 DOM 和 CSS。以下是我希望在每种情况下看到的屏幕截图（忽略垂直对齐和更改按钮边距问题）：

有谁知道如何在 HTML 5 中完成上述布局？请注意，我只需要支持现代浏览器（不需要支持 IE/Edge）。

Answer 1

想法是在跨度上将flex-shrink; 设置为0。

div {
  display: flex;
  resize: both;
  overflow: hidden;
  padding:10px;
  border:1px solid;
}

button {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 30px;
}

span {
  min-width: 50px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Bottom right corner to resize.
<div>
  <button>Button</button>
  <button>Long Button</button>
  <button>Even longer Button</button>
  <span>Post-Btn Text</span>
</div>

---

因为跨度最终也必须缩小，所以它也至少需要flex-shrink:1;。

这样做的问题是按钮上的收缩值必须足够高，以使跨度不会随按钮收缩，并且不能太高，否则按钮不会收缩。

div {
  display: flex;
  resize: both;
  overflow: hidden;
  padding:10px;
  border:1px solid;
}

button {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 30px;
  
  flex-shrink:999999999999;
}

span {
  min-width: 50px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  flex-shrink:1;
}

Bottom right corner to resize.
<div>
  <button>Button</button>
  <button>Long Button</button>
  <button>Even longer Button</button>
  <span>Post-Btn Text</span>
</div>

我可能会回来看看是否有更好的方法。

Answer 2

尝试调整窗口大小。希望对你有帮助。

.container {
  display: flex;
  border: 2px red solid;
}

.container button,
.container span {
  font-size: 1rem;
  min-width: 30px;
  margin-right: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

<div class="container">
  <button>Button</button>
  <button>Long Button</button>
  <button>Longer Batton</button>
  <span>Some Text</span>
</div>

Answer 3

div {
  border: 1px solid #F00;
  display: flex;
  overflow: hidden;
  resize: horizontal;
  white-space: nowrap;
}

div > * {
  min-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

span {
  flex-shrink: 1;
}

button {
  flex-shrink: 50000000;
}

<div>
  <button>Button</button>
  <button>Long Button</button>
  <span>Post-Btn Text</span>
</div>