浏览器是否可以像使用弹性框或css制作的标签一样？

Question

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

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

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

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;