ADMIN LTE Notification dropdown not wrapping content

Question

Notification Image:

From above Image it is clear that the Notification panel is not wrapping the content of the message. the actual text inside content is long, which is

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

Below is the code that I am using to show notification.

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

Any Idea How to wrap the text?

You can view page here

Answer 1

Here is how to fix that:

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

CSS selector has been adjusted for the html code you've shown.