Question

我有nab-tabs，非活动标签上带有省略号。我的目标是能够很好地堆叠这些选项卡，并根据需要缩小宽度以使其占据一行。到现在为止，当出现很多标签时，它们到处都是。

问题：

这是我的代码。

.nav-tabs>li:not(.active)>a {
  background-color: white;
  border: 1px solid #ddd;
  border-bottom: none;
  border-top: 3px solid #9d9d9d;
  text-overflow: ellipsis;
  max-width: 100%;
  width:4em;
  overflow: hidden;
  display: block;
  float: left;
}

.nav-tabs {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  white-space: nowrap;
}

<ul class="nav nav-tabs">

  <div class="btn-toolbar pull-right">
    {% block tab_buttons %}
    {% endblock %}
  </div>

  <li role="presentation" class="{% if '/reports' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:reports-list' benchmark.id %}" role="tab">Reports</a></li>
  <li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:hosts-list' benchmark.id %}" role="tab">Hosts</a></li>
  <li role="presentation" class="{% if '/rules' in request.path %}active{% endif %} inverse"><a href="{% url 'sc:benchmarks:rules-list' benchmark.id %}" role="tab">Rules</a></li>
  <li role="presentation" class="{% if '/summary' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:summary' benchmark.id %}" role="tab">Summary</a></li>
  <li role="presentation" class="{% if '/incidents' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:incidents-list' benchmark.id %}" role="tab">Incidents</a></li>
  <li role="presentation" class="{% if '/events' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:events-list' benchmark.id %}" role="tab">Events</a></li>
  <li role="presentation" class="{% if '/aliases' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:aliases-list' benchmark.id %}" role="tab">Aliases</a></li>
</ul>

报告

预期：

如果需要完成我想要的事情，我很高兴使用jquery解决方案。

标签是动态的。可能很多。

Answer 1

这对您的CSS有用吗？我将项目更改为嵌入式元素，并将CSS选择器应用于所有<li>标签，而不是<a>标签。

.nav-tabs>li {
    background-color: white;
    border: 1px solid #ddd;
    border-bottom: none;
    border-top: 3px solid #9d9d9d;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    display: inline-block;
}

.nav-tabs {
    list-style: none;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    white-space: nowrap;
}

Answer 2

看看这个通用示例，我认为这会有所帮助：

.container {
  width: 100%;
  border: 1px solid black;
  overflow: hidden;
  overflow-x: scroll;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-text {
  display: inline-block;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="container">
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>
  <button class="inline-text"> Regular short string. </button>

</div>

并使用ul + li和一些样式来模仿链接：

.container {
  width: 100%;
  border: 1px solid black;
  overflow: hidden;
  overflow-x: scroll;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style-type: none;
  padding: 0;
}

.inline-text {
  display: inline-block;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: underline;
  color: blue;
}

<ul class="container">
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
  <li class="inline-text"> Regular short string. </li>
</ul>

编辑-动态更改宽度功能：

var navLi = document.getElementsByClassName('inline-text');
function duplicate() {
  var clone = navLi[0].cloneNode(true);
  navLi[0].parentNode.appendChild(clone);
  for (var i=0; i < navLi.length; i++) {
    if (navLi.length > 5) {navLi[i].style.maxWidth = '150px';}
    if (navLi.length > 10) {navLi[i].style.maxWidth = '100px';}
    if (navLi.length > 15) {navLi[i].style.maxWidth = '50px';}
  }
}
document.getElementById('addTab').onclick = function() {duplicate()};

.container {
  display: inline-block;  
  padding: 5px 0;
  max-width: 100%;
  border: 1px solid black;
  overflow-x: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style-type: none;
}

.inline-text {
  display: inline-block;
  max-width: auto;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: underline;
  color: blue;
}

<ul class="container">
  <li class="inline-text"> Regular short string. </li>
</ul>
<hr />
<p> Demo purpose: click to <button id="addTab" onlick="duplicate()">Add Tab</button></p>

如果有很多标签，则导航标签会用椭圆形调整宽度

2 个答案: