0

以下でラッピングする単語が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>

サンプル

4

1 に答える 1

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>

于 2013-07-08T04:26:11.683 に答える