Bootstrap3、navbar：如何在span中打断一个长文本？

Question

我创建了一个带有下拉菜单的导航栏来显示通知。我将下拉列表及其宽度设置为 200px。

我的问题是：我有一些长文本要通知并尝试将其换行但它不起作用。

你有什么idea/solution可以解决吗？

我的演示：Please resize the result console to width 800px to see the problem!

<style>
    #notify>*{
        width: 200px;
        /* white-space: normal;
        word-wrap: normal; */
    }

    #notify>li>a{
        padding-left: 5px;
        padding-right: 5px;
    }
</style>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-left" id="accountMng">
            <li class="dropdown" id="navbar-notify">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-bell"><span class="badge badge-red">2</span></span>
                </a>
                <ul class="dropdown-menu text-center" id="notify">
                    <li><a href="#"><span><strong>UserXXXXXXXXX</strong> responsed your product.</span></a></li>
                    <li><a href="#"><span>Product <strong>XXXXX</strong> out of stock!</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Image

Answer 1

因为 .dropdown-menu>li>a 有一个 white-space: nowrap; 声明。

用white-space: initial;

覆盖

Bootstrap3、navbar：如何在span中打断一个长文本？

Bootstrap 3, navbar: How to break a long text in span?

html

css

navbar