Hide specific words if not enough space available (css only) - html

Question

I am trying to build a simple navigation where some parts of the navigation items are hidden depending on the available space:
.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>
I successfully made some words disappear with using a fixed height and overflow:hidden on the a tag.
Now I'm looking for a solution to keep the red words (.important) visible and hide the others. Is there a way to do this?
If the word on the invisible line is longer than the visible one, the visible has too much whitespace, is there also a solution to this?
With Javascript it would be fairly easy, but I'm looking for a CSS only solution.
JSFiddle: http://jsfiddle.net/86qjexz3/