Remove white space from the block when the menu item breaks in two lines

Question

Below is the logic for the simple menu. The issue is when the text breaks into two lines extra white space is added to the <a> element

white-space: nowrap can remove white space, but will prevent the text from breaking, when the viewport width is not wide enough to naturally fit the text in one line. It's also not desired to set fixed-width on each child.

.menu {
  display: flex;
  width: 100%;
}

.menuItem {
  list-style: none;
  padding-right: 50px;
  display: inline-flex;
}

.menuItem a {
  display: inline;
  background-color: #ccc;
}

.menuItem span {
  width: 12px;
  height: 4px;
  background-color: green;
  display: inline-block;
  margin-left: 10px;
}

<ul class='menu'>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>Two Words</a>
    <span></span>
  </li>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>
Two Words</a>
    <span></span>
  </li>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>
Two Words</a>
    <span></span>
  </li>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>
Two Words</a>
    <span></span>
  </li>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>Two Words</a>
    <span></span>
  </li>
</ul>

.menuItem { flex-basis: 0; } Try this. – Vivekraj K R Aug 08 '19 at 09:14 — Vivekraj K R, Aug 08 '19 at 09:14

score 1 · Answer 1 · answered Aug 08 '19 at 09:08

1

add width: min-content to your <a> tag style, this will remove extra space!

answered Aug 08 '19 at 09:08

adel

3,436
1
7
20

1

this is a nice approach. But afaik this has very limited support. See https://caniuse.com/#search=min-content – Soothran Aug 08 '19 at 09:30

score 1 · Accepted Answer · answered Aug 08 '19 at 09:25

I have added flex-basis:0 to a tags. Hope this helps.

.menu {
  display: flex;
  width: 100%;
  max-width: 700px;
}

.menuItem {
  list-style: none;
  padding-right: 50px;
  display: inline-flex;
}

.menuItem a {
  display: inline;
  background-color: #ccc;
  flex-basis: 0;
}

.menuItem span {
  width: 12px;
  height: 4px;
  background-color: green;
  display: inline-block;
  margin-left: 10px;
}

<ul class='menu'>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>Two Words</a>
    <span></span>
  </li>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>
Two Words</a>
    <span></span>
  </li>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>
Two Words</a>
    <span></span>
  </li>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>
Two Words</a>
    <span></span>
  </li>
  <li class='menuItem'>
    <a target='_' href='https://www.google.com'>Two Words</a>
    <span></span>
  </li>
</ul>

Remove white space from the block when the menu item breaks in two lines

2 Answers2