浏览器可以像使用弹性框或css制作的标签吗？

Question

当主容器不适合宽度的所有项目时，需要标签收缩。

这是预期的行为：http://adamschwartz.co/chrome-tabs/

但它可以在纯css上完成，flexbox可能会吗？

Answer 1

解决方案非常简单。只需要display: flex;用于容器，而overflow: hidden;用于标签项目。不知道为什么我的问题被低估了。 :(

html {
  font-family: sans-serif;
}

.container {
  display: flex;
  border: 1px solid silver;
  padding: 10px 10px 0;
  width: 400px;
  margin: 0 auto 10px;
}

.tab {
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
  border: 1px solid silver;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 10px;
  margin-right: 8px;
  border-bottom: none;
}

.tab:last-child {
  margin-right: 0;
}

<div class="container">
  <div class="tab">Google</div>
  <div class="tab">Apple</div>
  <div class="tab">Facebook</div>
</div>

<div class="container">
  <div class="tab">Google</div>
  <div class="tab">Apple</div>
  <div class="tab">Facebook</div>
  <div class="tab">Chrome</div>
  <div class="tab">Flexbox</div>
</div>

<div class="container">
  <div class="tab">Google</div>
  <div class="tab">Apple</div>
  <div class="tab">Facebook</div>
  <div class="tab">Chrome</div>
  <div class="tab">Flexbox</div>
  <div class="tab">Stackoverflow</div>
</div>