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

Question

我有一个菜单，并且有一个项目，文本要冗长和折断。第二行如何与以上相符？

<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

如果您希望第二行和第一行位于同一行，例如。

MUSIK-UND MEDIENMANGEMENT

可以尝试的东西吗？

1. 使容器变宽
2. 使文本变小（减小字母间距或字体大小等）
3. 添加一个溢出属性（将其设置为省略号，或隐藏不适合的字母）
4. 为容器添加最小宽度，以使它不会缩小到一定宽度以上

Answer 2

您可以将white-space: nowrap;添加到li元素中。这将有助于防止它们包装。

Answer 3

如果您要防止第二个列表项断行，请使用以下命令：

ul { 
  white-space: nowrap;
 }