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

Question

通知图片：

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

saurabh raised first request to review Task 'ABCDE NOV 2017' with Assignment 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

试试这个：

.menu {
  word-wrap : break-word;
}

Answer 2

解决方法如下：

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

CSS 选择器已针对您显示的 html 代码进行了调整。

Answer 3

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

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

ADMIN LTE Notification dropdown not wrapping content

javascript

css

meteor

meteor-blaze

adminlte