Раскрывающийся список уведомлений 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>

Есть идеи, как обернуть текст?

Вы можете просмотреть страницу здесь


javascript css meteor adminlte meteor-blaze
person Ankur Soni    schedule 23.09.2017    source источник
comment
Может быть, вы могли бы показать jsfiddle на рабочем примере?   -  person Styx    schedule 23.09.2017
comment
@styx: вы можете просто нажать здесь adminlte.io/themes/AdminLTE/index2.html   -  person Ankur Soni    schedule 23.09.2017

Ответы (3)


arrow_upward
0
arrow_downward

Вот как это исправить:

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

Селектор CSS был адаптирован для показанного вами html-кода.

person Styx    schedule 23.09.2017

arrow_upward
1
arrow_downward

Админ 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;
}
person Aref Ben Lazrek    schedule 23.09.2017
comment
Ваш селектор CSS не будет работать, потому что макет HTML отличается от макета AdminLTE. - person Styx; 23.09.2017

arrow_upward
-1
arrow_downward

попробуй это :

.menu {
  word-wrap : break-word;
}
person mahip_j    schedule 23.09.2017