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

Question

[aaltw]

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>

Выглядит так:


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


Но перенос должен быть только для "Название 2" и перенестись должны только слова "перенесен на новую строку", которые не поместились. Как это сделать? Уже перебрал всевозможные word-wrap, overflow, witdth, white-spaces и т.д, но вообще никак. Выставлять вручную ширину для каждого элемента мне не нужно, все должна ограничивать максимальная ширина.

Answer 1

[andand44]

Если текст всегда в теге <p>, то такой код подойдет.
.dropdown-item p {white-space: normal;}

Comments

[aaltw]

Нет, тоже самое, что и на .dropdown-item, только теперь будет переноситься текст в p. Тоже без учета максимальной ширины, текст будет перенесен сразу, как только ширина p достигнет ширины li, а эта ширина ограничена остальным контентом в li.

Мне же нужно, чтобы текст в p имел длину максимальной ширины, а если не помещается, то только тогда бы происходил перенос.

[andand44]

Значит нужно max-width заменить на width и потом изменять его ширину медиа запросами, когда он не будет помещаться на мелких экранах, если я правильно понял написанное

[aaltw]

andand44, мелкие экраны тут не причем, этот текст заранее неизвестен и может быть любой ширины. Мне нужно, чтобы он помещался ровно до максимальной ширины дропдауна, а после переносился. А если я буду устанавливать ширину просто, то у меня будут дропдауны, в которых слишком много лишнего места.

Цель как раз в том, чтобы содержимое дропдауна определяло его ширину, но не более, чем его максимальная ширина.

[andand44]

В таких случаях обычно делают среднюю ширину dropdown, чтобы и с длинным и коротким текстом смотрелось нормально. Можно попробоваться задать ширину <p>, если этого тега нет в других dropdown

[aaltw]

andand44, т.е. максимальная ширина не может ограничить перенос текста и можно только конкретику выставлять и все?

[andand44]

В данном случае не может. Поэтому в bootstrap и было предусмотрено переполнение текстом с помощью правила white-space: nowrap;