如何解决Bootstrap 4导航栏标题溢出并实现省略号截断？

嘿，我刚好碰到过类似的问题，这就帮你搞定！

你的核心问题在于：按钮和标题所在的容器没有用弹性布局（flex）约束，导致它们默认换行，而且标题容器没有明确的宽度限制，所以省略号样式根本起不了作用。

直接给你修改好的代码，关键修改点我会在下面说明：

<!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 d-flex align-items-center">
    <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 flex-grow-1" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
      <span class="navbar-brand mb-0">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>

关键修改说明： #

• 给最外层的container添加了d-flex align-items-center类：把容器变成flex布局，让按钮和标题在同一行垂直居中，彻底避免换行。
• 给标题所在的navbar-nav添加了flex-grow-1类：让标题容器自动占据按钮之外的所有剩余宽度，给标题一个明确的宽度限制，这样省略号样式才能生效。
• 给navbar-brand添加了mb-0类：移除默认的底部外边距，避免标题和按钮之间出现不必要的间距，让布局更紧凑。

这样修改后，移动端的标题就会和汉堡按钮在同一行，当标题过长时自动用省略号截断，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Dr Ljotsson