Question

我有4个a - 标签。每个CSS中的所有内容都有效。它在我的手机上完美地调整了按钮的大小。我唯一的问题是在我的手机上，对于登录/注册按钮，按钮内部的文本切换以及所有显示的是登录/注册。

我记得white-space: normal是这样做的方法，但也许我错了。

@media only screen and (max-device-width: 480px) {
  .newsButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: left;
  }
  
  .venueButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: right;
  }
  
  .learnButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: left;
  }
  
  .loginButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: right;
  }
}

<a href="menu.php" class="newsButton" data-role="button" data-theme="e">News</a>
<a href="venue.php" class="venueButton" data-role="button" data-theme="e">Venue Hire</a>
<a href="learn.php" class="learnButton" data-role="button" data-theme="e">Learn</a>
<a href="login.php" class="loginButton" data-role="button" data-theme="e">Login/Register</a>

Answer 1

.custom-btn{
    display: inline-block;
    width: 49%;
    height: auto;
    white-space: normal;
    text-align: left;
    padding: 16px;
}

Answer 2

我相信你使用word-wrap: break-word;。此外，删除height限制 - 当单词换行到新行时，它只会导致奇怪的文本溢出问题。

@media only screen and (max-device-width: 480px) {
.newsButton{
    width:49%;
    word-wrap:break-word;
    float: left;
}

.venueButton{
    width:49%;
    word-wrap:break-word;
    float: right;
}

.learnButton{
    width:49%;
    word-wrap:break-word;
    float: left;
}

.loginButton{
    width:49%;
    word-wrap:break-word;
    float: right;
}
}

此外，您似乎以非常奇怪的方式使用您的课程。您不应该将这些类分配为id并将所有按钮分配给button类吗？的 HTML

<a href="menu.php" id="newsButton" class="button" data-role="button" data-theme="e">News</a> <a href="venue.php" id="venueButton" class="button" data-role="button" data-theme="e">Venue Hire</a> <a href="learn.php" id="learnButton" class="button" data-role="button" data-theme="e">Learn</a> <a href="login.php" id="loginButton" class="button" data-role="button" data-theme="e">Login/Register</a>

<强> CSS：

@media only screen and (max-device-width: 480px) { .button{ width:49%; word-wrap:break-word; float: left; } }

Answer 3

问题是：a标签默认为display: inline。 word-wrap: break-word不适用于不是display: inline-block或display: block的任何元素（请参见this）。

因此，您必须像这样

.button {
  // ...
  display: inline-block;
  word-wrap: break-word;
  // ...
}

希望这会有所帮助。

Answer 4

您可以尝试white-space: nowrap;。

@media only screen and (max-device-width: 480px) {
  .newsButton {
    width: 49%;
    height: 140px;
    white-space: nowrap;
    float: left;
  }
  
  .venueButton {
    width: 49%;
    height: 140px;
    white-space: nowrap;
    float: right;
  }
  
  .learnButton {
    width: 49%;
    height: 140px;
   white-space: nowrap;
    float: left;
  }
  
  .loginButton {
    width: 49%;
    height: 140px;
    white-space: nowrap;
    float: right;
  }
}

<a href="menu.php" class="newsButton" data-role="button" data-theme="e">News</a>
<a href="venue.php" class="venueButton" data-role="button" data-theme="e">Venue Hire</a>
<a href="learn.php" class="learnButton" data-role="button" data-theme="e">Learn</a>
<a href="login.php" class="loginButton" data-role="button" data-theme="e">Login/Register</a>

文本换行按钮

4 个答案: