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> 

任何想法如何包装文本？

您可以查看页面here

Answer 1

下面是如何解决这个问题：

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

CSS选择器已调整为HTML你显示的代码。默认情况下

Answer 2

试试这个：

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

Answer 3

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