Make tabs width equal or fit to height if there's no space and the text breaks line-CodePudding

I have tabs and I want them to have equal width, however make it fit the tab with the longest text.

What I do right now is, since I know the longest text tab, I manually set the width with rem. But this is what happens if a new text is added with longer than designed text (watch in Full page):

.nav-link {
  width: 12rem;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

  <title>Tabs</title>
</head>

<body>
  <ul >
    <li >
      <a " href="#">Some Very Very Long Text</a>
    </li>
    <li >
      <a " href="#">Some Link</a>
    </li>
    <li >
      <a " href="#">Another Link</a>
    </li>
    <li >
      <a ">Link</a>
    </li>
  </ul>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>

</html>

In this example, the long text makes the tab break a line because the width is fixed. Also in this case, the tab heights of the other tabs does not go down to fill the height, the just hang with spacing at the bottom. How can I take care of both these situations? (The equal width, and fit to height if no space for all the tabs and their text break line)

CodePudding user response：

Not sure how this would be done with a pure css solution. I'm interested in seeing the grid approach that tacoshy mentioned.

But here's an approach that uses a bit of JS.

So what you can do is create a CSS variable called --link-width: max-content. Basically each link will be wide enough to for it's content to fit in one line.

Then you can calculate the link that has the max width and set that value to the CSS variable. Since the variable is used on the nav-link class, the new width gets applied to all the links.

Note: We're using offsetWidth to calculate the width of the elements instead of clientWidth because offsetWidth also accounts for the borders

function adjustLinkWidth() {
  const navLinks = document.querySelectorAll('.nav-link')
  let maxWidth = navLinks[0].offsetWidth
  navLinks.forEach((link) => {
    if (maxWidth < link.offsetWidth) {
      maxWidth = link.offsetWidth
    }
  })
  document.documentElement.style.setProperty('--link-width', maxWidth   'px')
}

adjustLinkWidth()

:root {
  --link-width: max-content;
}
.nav-link {
  width: var(--link-width);
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

  <title>Tabs</title>
</head>

<body>
  <ul >
    <li >
      <a " href="#">Some Very Very Long Text</a>
    </li>
    <li >
      <a " href="#">Some Link that is longer than the first link</a>
    </li>
    <li >
      <a " href="#">Another Link</a>
    </li>
    <li >
      <a ">Link</a>
    </li>
  </ul>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>

</html>

Although, as you can see in this example, if your tabs end up being too wide, they'll look really weird, so its probably better not to have all of them be the same width