Question

我有一个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>

如何自动缩短菜单栏的标题和不包装？

Answer 1

解决方案是将text-truncate类和此style="max-width: 210px;"添加到范围。

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

以下是代码：

＆＃13;

<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>

＆＃13;

Answer 2

Bootstrap 4.5

我认为，最好的解决方案是将#include <iostream> class Vector { public: Vector(int s); // declaration an interface to definition or what part is. double& operator[] (int i); int size(); private: double* elem; int sz; }; Vector::Vector(int s) :sz{s} { elem = new double[s]; } double& Vector::operator[](int i) { return elem[i]; } int Vector::size() { return sz; } int main() { int s = 10; Vector v{10}; return 0; }和.navbar-brand包装在附加了.navbar-toggler和.flex-nowrap样式的flexbox中。然后，在.w-100中应用.navbar-brand样式，这将阻止文本导致.text-truncate换行到下一行

button

防止Bootstrap 4导航栏中的溢出标题

2 个答案: