Fit text into flexbox container

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?

`white-space: nowrap;` is about it with CSS. You could write a complicated JS function to make it happen but I would not recommend doing that. — BSK, Apr 07 '18 at 18:20
Hey. Thanks for Your reply. That's working. However I need to add a media query for smaller screen size. Anyways, that's sort of answer for my question. Thanks! — muszynov, Apr 07 '18 at 18:24
One more question: is it possible to make font responsive? I mean, when I make screen smaller, the container are getting smaller as well, but font-size is fixed and gettin sticked together very close. Is possible to make the font-size responsive? — muszynov, Apr 07 '18 at 18:28
See if [this post](https://stackoverflow.com/questions/15649244/responsive-font-size) helps. — BSK, Apr 07 '18 at 18:37

score 0 · Answer 1 · answered Apr 07 '18 at 18:50

0

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.

answered Apr 07 '18 at 18:50

muszynov

319
5
22

Fit text into flexbox container

1 Answers1