使文本适合flexbox容器

Question

I have a navigation bar with image in the middle. Looks similar to this:

<nav class="navigation">
   <ul class="navigation-list-1">
      <li class="navigation-list-item"><a href="#home">Home</a></li>
      <li class="navigation-list-item"><a href="#features">Features</a></li>
      <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
      <li class="navigation-list-item"><img class="logo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6f4af2d2d158"></li>
      <li class="navigation-list-item"><a href="#form">Form</a></li>
      <li class="navigation-list-item"><a href="#team">Team</a></li>
      <li class="navigation-list-item"><a href="#contact">Contact</a></li>
  </ul>

And style:

> .navigation-list-item {
list-style: none;
font-size: 15px;
font-weight: bold;
}

.logo {
  position:absolute;

width: 10vw;
left:calc(50% - (10vw/2) - (10px/2));
background: cornflowerblue;
border: 5px solid cornflowerblue;
}

ul{
  display:flex;
  margin-left:-40px;

}
li{
  flex:1;
  background:yellow;
  border:1px solid green;
  height:70px;
  line-height:70px;
  text-align:center;
}

li>a{
  text-decoration:none;
}

Now, if text in navigation item is longer than particular length, the text is spliting into next line and going outside the bar so it doesn't look good. How to make text in container always to be in one line?

Answer 1

Good option for start is to add css style for text: white-space: nowrap; Another good way is to set the font-size in vw units. Font will be responsive depending on screen size.