如果没有足够的可用空间，则隐藏特定的单词（仅适用于CSS）

Question

我正在尝试构建一个简单的导航，其中根据可用空间隐藏了导航项的某些部分：

.container {
  display: flex;
  border: 1px solid red;
  width: 100%;
  max-width: 600px
}
ul {
  margin: 0 30px 0px 0px;
  display: flex;
  list-style: none;
  padding: 0;
  flex-grow: 1;
}
li {
  margin: 0;
  padding: 0px 5px;
  border: 1px solid green;
  margin-left: 20px;
}
li:first-child{
  padding-left: 0px;
  margin-left: 0px;
}
li a {
  line-height: 18px;
  height: 18px;
  overflow: hidden;
  display: block;
}
.important {
  color: red;
}

<div class=container>
  <ul>
    <li>
      <a href=#>
        <span class=important>my</span>
        <span>elem</span>
      </a>
    </li>
    <li>
      <a href=#>
        <span>my</span>
        <span class=important>elem</span>
      </a>
    </li>
    <li>
      <a href=#>
        <span class=important>my</span>
        <span>elem</span>
      </a>
    </li>
    <li>
      <a href=#>
        <span>my</span>
        <span class="important">2nd</span>
        <span>elem</span>
      </a>
    </li>
    <li>
      <a href=#>
        <span>longerfirst</span>
        <span class="important">elem</span>
      </a>
    </li>
  </ul>
</div>

使用固定高度和overflow:hidden标签上的a，我成功地使一些单词消失了。

现在，我正在寻找一种解决方案，以使红色单词（.important）可见并隐藏其他单词。有办法吗？

如果看不见行上的单词长于可见行，则可见行有太多空白，是否有解决办法？

使用Javascript会很容易，但是我正在寻找仅CSS的解决方案。

JSFiddle：http://jsfiddle.net/86qjexz3/