html - 如何使用 CSS 将单词换到下一行？

Question

如何让它在移动设备上看起来更好: (按行分词)

我尝试了空白、断字、字间距、显示:表格标题，但都无法正常工作。

https://codepen.io/Jackkk/pen/zYYbvKY

.nav>li {
  display: inline-block;
}


/* very simplified css*/

<ul class="nav nav-line-bottom nav-normal nav-size-normal nav-center">
  <li class="tab active has-icon"><a href="#tab_meble-fryzjerskie"><span>Meble fryzjerskie</span></a></li>
  <li class="tab has-icon"><a href="#tab_fotele-fryzjerskie"><span>Fotele fryzjerskie</span></a></li>
  <li class="tab has-icon"><a href="#tab_myjnie-fryzjerskie"><span>Myjnie fryzjerskie</span></a></li>
  <li class="tab has-icon"><a href="#tab_konsolety-fryzjerskie"><span>Konsolety fryzjerskie</span></a></li>
  <li class="tab has-icon"><a href="#tab_pomocniki-fryzjerskie"><span>Pomocniki fryzjerskie</span></a></li>
  <li class="tab has-icon"><a href="#tab_meble-48h"><span>Meble 48h</span></a></li>
</ul>

示例网站链接:https://dobrzekupuj.pl/

Answer 1

为每个 li 设置一个 width 或 max-width

例如

.nav > li {
    width: 70px;
}

或

.nav > li {
    max-width: 70px;
}

对于移动设备，仅将其放在媒体查询中

@media (max-width: 480px) {
    .nav > li {
        width: 70px;
    }
}