按钮内的文本换行

Posted 2023-02-22

【中文标题】按钮内的文本换行

【英文标题】：text wrap inside a button

【发布时间】：2013-10-19 01:00:03

【问题描述】：

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

【问题讨论】：

不可复制。问题文本中描述的行为取决于代码中未包含的设置，可能是非常大的字体大小，也可能是 overflow 设置。问题的标题是“”，但问题中根本没有提到文本换行。您是否真的想要要换行的文本，例如如果需要，“注册”会出现在“登录/”下方？

只有这几行代码（您在帖子中分享的内容）用于按钮样式或按钮也继承自其他 CSS？

【参考方案1】：

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

【讨论】：

稍微解释一下你的答案可能会更好

【参考方案2】：

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

因此，您的按钮必须像这样

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

希望这会有所帮助。

【参考方案3】：

我相信你使用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;
    

【讨论】：

这不起作用。至于高度，我把它指定在某个高度，因为它是我想要按钮的大小。

我不明白你想怎么发短信。你想在最后有一个省略号吗？像现在这样切断的文字是什么？您还可以提供一个链接，以便我们可以重现问题并解决它。

word-wrap: break-word 分词，例如“注册”到“R”和“注册”。它不仅在允许的断点处执行断字或断字符串。

@JukkaK.Korpela 在我对 AnujHari 的情况了解有限的情况下，这似乎是唯一可能的解决方案。显然，“登录/注册”中没有任何空格可以让整个单词换行

你可以在那里添加一个空格，或者一个<wbr>标签，如果这是问题的话。但我们真的不知道真正的问题是什么。然而，不管问题是什么，断句几乎是一个错误的解决方案。