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>

任何想法如何包装文本？

您可以查看页面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;
}

Answer 2

以下是解决这个问题的方法：

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

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

Answer 3

试试这个：

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

ADMIN LTE Notification下拉列表未包装内容

3 个答案: