html - 如果内容太长，用省略号水平滚动

Question

仅适用于移动设备，我正在滚动我现有的导航选项卡。但是，根据选项卡内容，您甚至不知道右侧会不时出现更多内容。我很想显示省略号 - 但 text-overflow: ellipsis 似乎在这里不起作用。任何帮助，将不胜感激！

结果应该是 => "Basel Frankf...."

#container {
  width: 200px; 
}
ul {
  list-style-type: none;
}
li {
  margin-right: 10px;
}
.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -moz-box;
}

.nav-tabs>a {
  float: none;
}

<div id="container">
  <ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#" data-toggle="tab">Basel</a></li>
    <li class=""><a href="#" data-toggle="tab">Frankfurt</a></li>
    <li class=""><a href="#" data-toggle="tab">Hamburg</a></li>
    <li class=""><a href="#" data-toggle="tab">München</a></li>
    <li class=""><a href="#" data-toggle="tab">Hamburg</a></li>
  </ul>
</div>

标签： htmlcss

Answer 1

文本溢出省略号作用于内容，而不是子元素。对于移动版本，请使用另一种方式，例如https://www.w3schools.com/howto/howto_js_mobile_navbar.asp