JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab_a" data-toggle="tab">Tab A</a></li>
  <li><a href="#tab_b" data-toggle="tab">Tab B</a></li>
  <li><a href="#tab_c" data-toggle="tab">Tab C</a></li>
  <li><a href="#tab_d" data-toggle="tab" style="overflow:hidden">Tab D Is Very Long! But this does not works!</a></li>
</ul>

CSS

.nav-tabs > li > a {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 10em;
}