如何用CSS将单词打断到下一行？

Question

如何使它在移动设备上看起来更好： （按行打破单词）

我尝试了空格，断字，单词间距，display：table-caption，但无法使其正常工作。

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

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

例如

.nav > li {
    width: 70px;
}

或

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

仅针对移动设备投放媒体查询

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

Answer 2

将table-layout设置为fixed似乎是一次将所有元素都包装成2行的最佳选择：

ul {
  display: table;
  table-layout: fixed;
  margin: auto;
  border-spacing: 1vw 0;
}

li {
  display: table-cell;
}

/* makup/see me */
li {border:1px solid;}
ul {
  border-spacing: 1vw 0;
}
* {margin:0;
padding:0;
box-sizing:border-box;
}

<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>

为使其始终缩小到最小，再次使用table-layout（此处未设置为fixed）似乎是最佳选择：

ul {
  display: table;
  width:0;/* will shrink/expand to fit content anyway */
  margin: auto;
  border-spacing: 1vw 0;
}

li {
  display: table-cell;
}

/* makup/see me */
li {border:1px solid;}
ul {
  border-spacing: 1vw 0;
}
* {margin:0;
padding:0;
box-sizing:border-box;
}

<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>

在整个页面中运行两个代码片段以查看不同的行为。

还请注意，对原始代码进行一些填充也可以更早地设置您的换行点

---

根据您对Codepen的更新，表格布局也只能在li上使用。

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

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


/* 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>

Answer 3

我将插入一个<br>标签，并附加一个根据屏幕大小显示/隐藏<br>的类。

示例：

HTML：

<p>FirstName<br class="line-break">LastName</p>

CSS：

/* Default for mobiles */
.line-break {
    display: block;
}

/* For tablets/desktops */
@media only screen and (min-width: 600px) {
    .line-break {
        display: none;
    }
}