Question

我目前正在尝试显示导航栏

 <div class="navigation" id="navigation">
      <a href="/">Show all</a>
      {% for item in dict %}
       <a href="/{{ item }}" >{{item}}</a>
      {% endfor %}
  </div>

问题是我不知道dict中有多少项可能是5或可能是50。

我想要做的就是设计风格，使它只有它的屏幕宽，所以更大的屏幕会看到菜单在一行上填充更多，更小的屏幕将看到更少的项目在线，以及显示其余部分的切换按钮的任何超出部分。

我使用bootstrap。我已经尝试了word-wrap: break-word;和overflow-y: hidden !important，但他们都没有解决我的问题

编辑：这是问题https://jsfiddle.net/akn5r7y5/

的问题

正如您所看到的，根据屏幕尺寸，第二行会有更多或更少的标题

Answer 1

将父元素width元素的#navigation设置为90vw，overflow-x设置为hidden。将height设为86px font-size至14px

#navigation {
  border-bottom: 1px solid currentColor;
  /* Or whatever color you want */
  text-decoration: none;
  word-wrap: break-word;
  padding-top: 70px;
  overflow: hidden !important;
  white-space: no-wrap;
  text-overflow: clip;
  height: 86px;
}

https://jsfiddle.net/akn5r7y5/1/

Answer 2

从这里有点引用的答案：

https://stackoverflow.com/a/11006978/5610732

你可以用css。

来做到这一点

要阻止导航菜单突破到下一行，您需要将white-space: nowrap;添加到父<ul>元素，display: inline-block;和float: none;以孩子<li>元素。

我使用默认的bootstrap导航栏做了一个例子：

http://codepen.io/dominicgan/pen/ZBxMbN/?editors=1100

获取文本以隐藏而不是堆叠在顶部

2 个答案: