Почему мой текст расширяет ширину div? (Не из-за атрибутов переноса по словам или переполнения) - PullRequest
Новая
       17

Почему мой текст расширяет ширину div? (Не из-за атрибутов переноса по словам или переполнения)

0 голосов
/ 16 апреля 2020

Я пытаюсь загрузить уведомления из моего приложения в выпадающий список из моей панели навигации (это bootstrap панель навигации). Частицы, с которыми я работаю для каждого уведомления, похожи на эту: 

<%= link_to student_path(notification.notifiable), class: "dropdown-item notification-row #{"unread" if !notification.read_at?}" do %>
  <%= image_tag notification.faculty.photo, class: "avatar", alt: "faculty-pic" %>
  <div class="notification-message">
    <%= notification.faculty.teacher_name %>
    <%= notification.action %>
    <%= notification.notifiable.first_name %>
    <%= notification.notifiable.last_name %>
    to you
  </div>
  <div class="notification-time"><%= time_ago_in_words(notification.created_at) %></div>
<% end %>

Я специально пытаюсь сохранить класс «messages-message» шириной 200 пикселей, как показано в моем css: 

.notification-message {
    width: 200px;
}

но мои части не отображаются соответственно ...

enter image description here

Я хочу "сообщение-уведомление" содержимое для переноса в пределах этой ширины, чтобы мои уведомления были согласованы. Я попытался добавить атрибуты word-wrap и overflow-wrap к моему css, но они не помогают (моя часть отображается точно так же). Это происходит из-за какого-то стиля bootstrap? Любые другие идеи ??

...