如果没有空格并且文本换行，则使标签宽度等于或适合高度答案

【问题标题】：Make tabs width equal or fit to height if there's no space and the text breaks line如果没有空格并且文本换行，则使标签宽度等于或适合高度
【发布时间】：2022-10-31 06:52:29
【问题描述】：

我有标签，我希望它们具有相同的宽度，但是让它适合带有最长文本的标签。

我现在要做的是，因为我知道最长的文本选项卡，所以我用rem 手动设置宽度。但是，如果添加的新文本比设计的文本长（在整页中观看），就会发生这种情况：

.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/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

<body>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active text-center"" href="#">Some Very Very Long Text</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-center"" href="#">Some Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-center"" href="#">Another Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-center"">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/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>

</html>

在此示例中，长文本使制表符换行，因为宽度是固定的。同样在这种情况下，其他选项卡的选项卡高度不会下降以填充高度，只是在底部留有间距。我该如何处理这两种情况？（相等的宽度，如果所有制表符及其文本断行都没有空间，则适合高度）

【问题讨论】：

使用网格方法！
我只是不知道我可以将标签与网格一起使用，因为他们没有提到它。您的意思是我可以尝试为每个选项卡提供一定（相同）数量的列？

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

不确定如何使用纯 css 解决方案来完成。我有兴趣看到 tacoshy 提到的网格方法。

但这是一种使用一点 JS 的方法。

所以你可以做的是创建一个名为--link-width: max-content 的CSS 变量。基本上每个链接都将足够宽以使其内容适合一行。

然后您可以计算具有最大宽度的链接并将该值设置为 CSS 变量。由于该变量用于nav-link 类，因此新宽度将应用于所有链接。

注意：我们使用offsetWidth 来计算元素的宽度，而不是clientWidth，因为offsetWidth 也考虑了边框

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/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

<body>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active text-center"" href="#">Some Very Very Long Text</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-center"" href="#">Some Link that is longer than the first link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-center"" href="#">Another Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-center"">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/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>

</html>

虽然，正如你在这个例子中看到的那样，如果你的标签最终太宽，它们看起来会很奇怪，所以最好不要让它们都具有相同的宽度

【讨论】：

棒极了！是的，我也不明白如何使用网格，因为它仍然是动态的（除非我总是调整每个最大选项卡的列数，然后这部分是已知的）。使用您的解决方案，它会计算一切。我的意思是它看起来并不奇怪，它非常好（如果你在标签之间添加背景颜色和边距）。谢谢！