ADMIN LTE Mitteilung Dropdown

Question

Mitteilung Bild Inhalt Verpackung:

Von oben Bild ist klar, dass das Benachrichtigungsfeld, um den Inhalt der message nicht gewickelt wird. der eigentliche Text innerhalb Inhalts ist lang, was

saurabh raised first request to review Task 'ABCDE NOV 2017' with Assignment ID 'Qg9hBNSTozkExpTYn'

Unten ist der Code ist, dass ich Benachrichtigung angezeigt verwenden.

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

Irgendeine Idee Wie man den Text einwickelt?

können Sie sehen Seite here

Answer 1

Hier ist, wie das beheben:

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

CSS-Selektor hat für den HTML-Code angepasst Code, den Sie gezeigt haben.

Answer 2

versuchen Sie dies:

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

Answer 3

Admin lte verwendet standardmäßig

overflow: hidden; 
text-overflow: ellipsis; 

und

white-space: nowrap; 

so Benachrichtigungstext wie das sein wird, wenn es lang ist

, wenn Sie die volle zeigen wollen Text in allen Dropdown-Verwendung

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

für den Code zur Verfügung gestellt Sie verwenden

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