ADMIN LTE通知下拉不包裹內容

從上面的圖片很明顯，通知面板不包裹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

來源

2017-09-23 Ankur Soni

也許，你可以展示的jsfiddle一起工作的例子嗎？ – Styx

@styx：您只需點擊此處https://adminlte.io/themes/AdminLTE/index2.html –

下面是如何解決這個問題：

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

CSS選擇器已調整爲HTML你顯示的代碼。默認情況下

來源

2017-09-23 16:46:29 Styx

-1

試試這個：

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

來源

2017-09-23 15:25:54

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

來源

2017-09-23 16:51:17

您的CSS選擇器不起作用，因爲HTML佈局與AdminLTE的不同。 – Styx

@Styx是的謝謝你我已經糾正了我的答案 –

ADMIN LTE通知下拉不包裹內容

回答

相關問題