如果存在很多选项卡，导航选项卡会使用省略号调整宽度

Posted 2023-05-08

【中文标题】如果存在很多选项卡，导航选项卡会使用省略号调整宽度

【英文标题】：nav-tabs adjust width with elipses if a lot of tabs are present

【发布时间】：2020-01-04 00:40:03

【问题描述】：

我有 nab 选项卡，在非活动选项卡上有省略号。我的目标是能够很好地堆叠这些选项卡，并根据需要将宽度挤压得更小，使其占据一行。到目前为止，当有很多标签出现时，它们无处不在。

问题：

这是我的代码。

.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 解决方案来完成我想要的。

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

【参考方案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;

【参考方案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>

EDIT - 动态改变宽度功能：

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>

【讨论】：

我更喜欢使用 nav-tab，它的行为会一样吗？

@Dilli 添加了一个模仿你的风格的列表。

您想要的解决方案，如果您有更多的 li，它只会在屏幕中以省略号结尾，而我想使用省略号 [Reg..] 或更多选项卡 [Regular] 创建更小的 li 宽度短...]所以用户仍然可以访问标签

@A. Meshu 我希望每个 li 的宽度更小，以便它们都适合屏幕。

@Dilli 你的意思是没有容器元素的滚动？里有多少？即使在浏览器上 - 目前你有很多打开的标签，它会放置一些箭头按钮以便滚动......