防止 Bootstrap 4 导航栏中的标题溢出
Prevent overflowing title in Bootstrap 4 navbar
我有一个 bootstrap 4 响应式应用程序，它在导航菜单切换按钮旁边为移动用户显示当前 select 页面的标题。如果标题太长，我希望用省略号自动缩短。但是，我无法让它工作。标题未缩短，导航栏线被换行，因此标题位于菜单切换按钮下方而不是旁边。
<!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>
如何实现自动缩短标题和non-wrapping菜单栏？
解决方案是将 text-truncate class 和 style="max-width: 210px;" 添加到跨度中。
216px 似乎是您可以为 320px 宽屏幕做的最大值。所以，我选择了 210px，让它在最小的屏幕上有一点喘息的空间。
代码如下：
<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>
Bootstrap 4.5
我认为这里最好的解决方案是将 .navbar-brand 和 .navbar-toggler 包装在一个额外的 flexbox 中，该 flexbox 应用了 .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>
我有一个 bootstrap 4 响应式应用程序，它在导航菜单切换按钮旁边为移动用户显示当前 select 页面的标题。如果标题太长，我希望用省略号自动缩短。但是，我无法让它工作。标题未缩短，导航栏线被换行，因此标题位于菜单切换按钮下方而不是旁边。
<!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>
如何实现自动缩短标题和non-wrapping菜单栏？
解决方案是将 text-truncate class 和 style="max-width: 210px;" 添加到跨度中。
216px 似乎是您可以为 320px 宽屏幕做的最大值。所以，我选择了 210px，让它在最小的屏幕上有一点喘息的空间。
代码如下：
<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>
Bootstrap 4.5
我认为这里最好的解决方案是将 .navbar-brand 和 .navbar-toggler 包装在一个额外的 flexbox 中，该 flexbox 应用了 .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>