title: If content is too long, scroll horizontally with ellipsis
body: <p><strong>Only for mobile</strong>, I am scrolling my existing nav-tabs. 
  But depending on the tab content you don't even recognize that there is more content to come on the right hand side from time to time. I would love to show ellipsis dots - but text-overflow: ellipsis does not seem to work here. Any help would be appreciated!</p>
  
  <p>Result shoud be => "Basel  Frankf...."</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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&gt;a {
    float: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;ul id="myTab" class="nav nav-tabs"&gt;
      &lt;li class="active"&gt;&lt;a href="#" data-toggle="tab"&gt;Basel&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#" data-toggle="tab"&gt;Frankfurt&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#" data-toggle="tab"&gt;Hamburg&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#" data-toggle="tab"&gt;München&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#" data-toggle="tab"&gt;Hamburg&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>