У меня есть проект с django.
Для HTML я использую Bootstrap 4, и у меня есть следующий код:
<div class="dropdown-menu dropdown-menu-right scrollable-menu" aria-labelledby="navbarDropdown">
{% for notification in user.notification_set.all %}
<a class="dropdown-item px-2" href="{{ notification.url_to_redirect }}">
<div class="row">
<div class="col m-0 p-0"><img src={% static 'open-iconic/svg/badge.svg' %} alt="thumb-up" title=Badge style="width: 16px; height: 16px;"></div>
<div class="col m-0 p-0">
{{ notification.text }}
{{ notification.created_at }}
</div>
</div>
</a>
{% endfor %}
</div>
Этот код дает мне ожидаемый результат:

Но иногда предложение {{ notification.text }}
слишком длинное, и я получаю это:

Я бы хотел "обернуть" {{notification.text}}
и получить следующий результат:

I пытался использовать float
или table
, но я туда не попал.
Кто-то может мне помочь?