How to move text in dropdown-menu that does not fit in the maximum width?

Question

Bootstrap

dropdown-menu css Element:
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>

It looks like this:


If I remove white-space: nowrap; for the .dropdown-item class, then everything will be wrapped, and not just what did not fit in the maximum width:


But the wrap should be only for "Name 2" and only the words "wrapped to a new line" that did not fit should be wrapped . How to do it? I have already gone through all sorts of word-wrap, overflow, witdth, white-spaces, etc., but nothing at all. I do not need to manually set the width for each element, everything should be limited by the maximum width.

Answer 1

If the text is always in the tag <p>, then this code will do.
.dropdown-item p {white-space: normal;}