html - 如何正确地用 CSS 换行？

Question

我有 2 个字要在下面包装

• 文化秃鹰
• Kleingruppen-Reise

但是当我使用时：

断词：打破一切；

包装看起来很奇怪。如何将 CSS 文件调整为漂亮的包装？

这是我的代码：

* {
  margin: 0;
  padding: 0;
}

.tabs-machine {
  margin-top: -12px;
  position: relative;
  height: 89px;
  background: url(http://aquaterra-travel.siampixel.com/images/tabs_machine_bg1.gif) no-repeat center top;
}

.tabs-machine-mask ul {
  width: 600px;
  overflow: hidden;
  margin: 0px auto;
}

.tabs-machine-mask ul li {
  float: left;
  display: inline-block;
  text-align: center;
  margin-left: 1px;
  vertical-align: middle;
}

.tabs-machine-mask ul li a {
  display: table-cell;
  width: 99px;
  height: 76px;
  color: #bf1e2d;
  font-size: 16px;
  font-family: "Myriad Pro", 'Average Sans', sans-serif;
  text-decoration: none;
  vertical-align: middle;
  padding-bottom: 1em;
  white-space: -moz-pre-wrap !important;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  white-space: pre-wrap;
  /* css-3 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;
}

<div class="tabs-machine">
  <div class="tabs-machine-mask">
    <ul>
      <li><a href="#">Culture Vulture</a></li>
      <li><a href="#">Kleingruppen-Reise</a></li>
      <li><a href="#">Explorer</a></li>
      <li><a href="#">Family</a></li>
      <li><a href="#">Festival and Events</a></li>
      <li><a href="#">Marine</a></li>
    </ul>
  </div>
  <div></div>
</div>

样本

Answer 1

我相信您正在寻求防止单词中断/连字符中间词。

尝试删除word-break:break-all;..tabs-machine-mask ul li a

.tabs-machine-mask ul {
  width: 600px;
  overflow: hidden;
  margin: 0px auto;
}

.tabs-machine-mask ul li {
  float: left;
  display: inline-block;
  text-align: center;
  margin-left: 1px;
  vertical-align: middle;
}

.tabs-machine-mask ul li a {
  display: table-cell;
  width: 99px;
  height: 76px;
  color: #bf1e2d;
  font-size: 16px;
  font-family: "Myriad Pro", 'Average Sans', sans-serif;
  text-decoration: none;
  vertical-align: middle;
  padding-bottom: 1em;

  white-space: -moz-pre-wrap !important;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
   /* word-break: break-all; */
  white-space: normal;
}

<div class="tabs-machine">
  <div class="tabs-machine-mask">
    <ul>
      <li><a href="#">Culture Vulture</a></li>
      <li><a href="#">Kleingruppen-Reise</a></li>
      <li><a href="#">Explorer</a></li>
      <li><a href="#">Family</a></li>
      <li><a href="#">Festival and Events</a></li>
      <li><a href="#">Marine</a></li>
    </ul>
  </div>
  <div></div>
</div>