Css 制作链接'；s文本换行而不是链接本身换行？

我有一个列表中的链接，我用它来制作标签，作为响应性设计的一部分

当有足够的宽度时，选项卡按我的要求排列。但是，在较小的宽度下，最后一个选项卡将换行到下一行，但我希望链接中的文本本身换行

我不能通过将最大宽度设置为33%来解决这个问题，因为每页的选项卡数量会有所不同，所以我的CSS解决方案需要为不同的选项卡数量工作

<ul>
  <li>
    <a href="#" class="current">Tab 1 stuff</a>
  </li>
  <li>
    <a href="#" class="">Tab 2 stuff</a>
  </li>
  <li><a href="#" class="">Tab 3 stuff</a></li>
</ul>

ul, li {
  padding: 0;
  margin: 0;
}
li {
  display: inline;
}
a {
  float: left;
  background: green;
  color: white;
  max-width: 33%;s
}
ul {  
  width: 20%;
  border: 3px solid red;
  overflow: auto;
  margin: auto;
}

李先生{
填充：0；
保证金：0；
}
李{
显示：内联；
}
a{
浮动：左；
背景：绿色；
颜色：白色；
最大宽度：33%；s
}
ul{
宽度：20%；
边框：3倍纯红；
溢出：自动；
保证金：自动；
}

您可以使用

显示：表格和
显示：表格单元格

请参见此

CSS:

我还更改了
的背景色，我很困惑。您发布的代码似乎可以满足您的要求。@j08691正如OP所解释的那样，如果有更多（或更少）选项卡，它将不再工作，因为
最大宽度：33%请看这里：增加ul的宽度，看看会发生什么。小提琴的问题是，标签总是占据整个宽度。这与我问题中图像中的第一个示例不同，在该示例中，它们只占必要的宽度。@jdln我更新了我的答案以满足您的要求。（我还加了一把新小提琴）
ul, li {
    padding: 0;
    margin: 0;
}
ul {
    width: 20%;
    border: 3px solid red;
    overflow: auto;
    margin: auto;
    display:table;
}
li {
    display: table-cell;
     background: green;
}
a {
    float: left;
    color: white;
}