Bootstrap dropdown и перенос текста

Не могу догадаться как сделать перенос текста в dropdown bootstrap.

<div class="dropdown">
              <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Еще
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Многогогогогогогоогогого текста</a>
            <a class="dropdown-item" href="#">Многогогогогогогоогогого текста</a>
            <a class="dropdown-item" href="#">Многогогогогогогоогогого текста</a>
            <a class="dropdown-item" href="#">Многогогогогогогоогогого текста</a>
            <a class="dropdown-item" href="#">Многогогогогогогоогогого текста</a>
            <a class="dropdown-item" href="#">Многогогогогогогоогогого текста</a>
            <a class="dropdown-item" href="#">чуть-чуть</a>
          </div>
        </div>

Суть в том, что при смене разрешения экрана текст просто вылазит за границы. Уже перепробовала везде ставить ограничения на максимальную ширину, толку ноль(

https://codepen.io/apollinem1/pen/GRrPdZN

Там сразу будет понятен мой вопрос)