@aaltw

Как в dropdown-menu перенести текст, который не помещается в максимальную ширину?

dropdown-menu css
dropdown-menu { max-width: 18rem; }

Элемент:
<ul class="dropdown-menu dropdown-menu-end dropshadow-03 show" data-bs-popper="none">
  <div class="dropdown-li-group">
    <li><a class="dropdown-item bold" >
      Название 1
      <p>Этот текст помещается и не переносится</p>
    </a></li>

     <li><a class="dropdown-item bold">
       Название 2
       <p>Длинный текст, который не помещается и должен быть перенесен на новую строку</p>
     </a></li>
  </div>
</ul>


Выглядит так:
616fdea0f229a230068844.png

Если я уберу white-space: nowrap; у класса .dropdown-item, то переноситься будет вообще все, а не только то, что не поместилось в максимальную ширину:
616fdf40624e5939266759.png

Но перенос должен быть только для "Название 2" и перенестись должны только слова "перенесен на новую строку", которые не поместились. Как это сделать? Уже перебрал всевозможные word-wrap, overflow, witdth, white-spaces и т.д, но вообще никак. Выставлять вручную ширину для каждого элемента мне не нужно, все должна ограничивать максимальная ширина.
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
@andand44
Если текст всегда в теге <p>, то такой код подойдет.
.dropdown-item p {white-space: normal;}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы