javascript - ADMIN LTE 通知下拉菜单不包含内容

Question

通知图片:

从上图中可以清楚地看出，通知面板没有包装消息的内容。内容中的实际文本很长，即

saurabh 先养
请求审查任务
'ABCDE 2017 年 11 月'
分配 ID 为“Qg9hBNSTozkExpTYn”

下面是我用来显示通知的代码。

<li class="dropdown notifications-menu">
    <a href="#" class="dropdown-toggle" id="notificationLink" data-toggle="dropdown"></a>
     <ul class="dropdown-menu">
        <li>
            <ul class="menu">
                {{#each notifications}}
                    <li>
                        <a href="#">
                            <small><strong>{{title}}</strong></small>
                            <div class="pull-right">
                                <small style="pull-right">
                                    <i class="fa fa-clock-o"></i> {{createdAt}}
                                </small>
                            </div>
                            <div class="row pull-left">
                                <p>{{message}}</p>
                            </div>
                        </a>
                    </li>
                {{/each}}
            </ul>
        </li>
    </ul>
</li>

知道如何包装文本吗？

You can view page here

Answer 1

Admin lte 默认使用

overflow: hidden;
text-overflow: ellipsis;

和

white-space: nowrap;

所以当它很长时通知文本会像那样

如果你想在所有下拉菜单中显示全文使用

.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a, .navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a, .navbar-nav>.tasks-menu>.dropdown-menu>li .menu>li>a {
    white-space: normal;
}

为您提供的代码使用

.notifications-menu>.dropdown-menu>li .menu>li>a p {
    white-space: normal;
}