菜单文本长时间休息-适合下一行

Question

I have a menu and there is a item where the text is to long and break. How can the second line fit with the above?

<ul class="sidr-class-sub-menu" style="display: block;">
    <li id="sidr-id-menu-item-14176" class="sidr-class-menu-item sidr-class-menu-item-type-post_type sidr-class-menu-item-object-page sidr-class-menu-item-14176"><a href="https://wave-akademie.de/fb-medien/">FB MEDIEN ÜBERSICHT</a></li>
    <li id="sidr-id-menu-item-14146" class="sidr-class-menu-item sidr-class-menu-item-type-post_type sidr-class-menu-item-object-page sidr-class-menu-item-14146"><a href="https://wave-akademie.de/ausbildung/musik-und-medienmanagement/">MUSIK- UND MEDIENMANAGEMENT<i class="sidr-class-menu-item-desc">(Staatlich anerkannt)</i></a></li>
</ul>

Answer 1

If you want the second line and first line to be on the same line, like.

MUSIK-UND MEDIENMANGEMENT

Somethings you can try?

1. Make the container wider
2. Make the text smaller (reduce letter spacing, or font size etc)
3. Add an overflow property (make it an ellipsis, or hide the letters that don't fit)
4. Add a min width to the container so that it can't shrink past a certain width

Answer 2

You can add white-space: nowrap; to the li elements. That would help prevent them from wrapping.

Answer 3

If you're looking to prevent the second list item from line-breaking use the following:

 ul { white-space: nowrap; }