防止在 Bootstrap 4 导航栏中溢出标题答案

【问题标题】：Prevent overflowing title in Bootstrap 4 navbar防止在 Bootstrap 4 导航栏中溢出标题
【发布时间】：2020-07-08 11:37:34
【问题描述】：

我有一个 bootstrap 4 响应式应用程序，它在导航菜单切换按钮旁边为移动用户显示当前选择页面的标题。如果标题太长，我希望它用省略号自动缩短。但是，我无法让它发挥作用。标题不会缩短，并且导航栏行被换行，因此标题位于菜单切换按钮下方而不是旁边。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
          integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"
            integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
            crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Nav with title and context menu</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary justify-content-start">
    <div class="container">
        <button id="navbar-toggler" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarNavAltMarkup">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-nav d-md-none" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
            <span class="navbar-brand">
                Page title which should be beside the toggle button and shortened by ellipsis on mobile
            </span>
        </div>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a href="#" class='nav-link'>Messages</a>
                <a href="#" class='nav-link'>About</a>
            </div>
        </div>
    </div>
    </nav>

<div class="container">
    <div class="row no-gutters">
        <div class="col col-lg-10 offset-lg-1"
        ">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra
            sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. </p>
    </div>
</div>
</div>
</body>
</html>

如何实现自动缩短标题和不换行菜单栏？

【问题讨论】：

标签： overflow navbar bootstrap-4

【解决方案1】：

解决方案是将text-truncate 类和这个style="max-width: 210px;" 添加到跨度中。

216px 似乎是 320px 宽屏幕所能达到的最大值。所以，我选择了 210 像素，以便在最小的屏幕上给它一点喘息的空间。

代码如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand-md navbar-dark bg-primary justify-content-start">
    <div class="container">
        <button id="navbar-toggler" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-nav d-md-none">
            <span class="navbar-brand text-truncate" style="max-width: 210px;">Page title which should be beside the toggle button and shortened by ellipsis on mobile</span>
        </div>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a href="#" class='nav-link'>Messages</a>
                <a href="#" class='nav-link'>About</a>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row no-gutters">
        <div class="col col-lg-10 offset-lg-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut tempore, ullam debitis, nihil commodi eligendi non porro nobis sapiente, iste, totam ex doloremque. Laboriosam dolore assumenda voluptatum minus commodi quidem voluptates optio!
            </p>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

【讨论】：

【解决方案2】：

引导 4.5

我认为这里最好的解决方案是将.navbar-brand 和.navbar-toggler 包装在一个附加的弹性框中，该弹性框中应用了.flex-nowrap 和.w-100 样式。然后，在.navbar-brand 中应用.text-truncate 样式，这将阻止文本导致button 换行到下一行

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- begin flexbox containing brand and toggler -->
  <div class="d-flex flex-nowrap w-100">
    <a class="text-truncate navbar-brand" href="#">Very long navbar brand text that will ultimately need to be clipped with ellipsis on smaller screens than a 4K TV</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  </div>
  <!-- end flexbox containing brand and toggler -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

【讨论】：