HTML：我能否将按钮文本显示在多行中？

Question

我有一个文本很长的按钮，像“点击这里开始玩”。我想控制它的宽度，并让文本显示在多行。在HTML/CSS中是否可以实现？

- Dagang

---

当然可以，只需要将所需的“width”值添加到按钮或按钮文本中的<br/>即可。我认为您可能需要定义按钮的类型是什么？如果它只是常规的<button>，那么上面说的就可以正常工作。http://jsfiddle.net/DHjXx/ - Joonas

Answer 1

是的，您可以使用white-space CSS属性将其放在多行上 :)

input[type="submit"] {
    white-space: normal;
    width: 100px;
}

<input type="submit" value="Some long text that won't fit." />

将此代码添加到您的元素中

 white-space: normal;
 width: 100px;

- Yhn

---

好的，谢谢！我可以控制它如何显示吗？比如说，我想要宽度为180像素，但每行只显示一个词。 - Dagang

您可以将左右填充设置为90px（这意味着您会“压缩”内容）；默认情况下，我认为它只会在“-”字符上断开单词。这对于动态文本可能很好用。但是，如果您有静态文本，则可能要尝试使用m.edmondson答案中给出的 。我使用两种选项更新了fiddle：http://jsfiddle.net/ZbJBc/7/ - Yhn

我发现这在Firefox上运行良好，但在Chrome上不行。有人可以确认吗？ - Erik B

嘿，我刚刚检查了一下，在我的Chrome（dev/40）中它仍然可以正常工作。当然，很可能beta或stable版本有一个破坏它的错误（这不是第一次了）。 - Yhn

我将文本大小中的“100px”替换为“8em”，在Chrome和Firefox中都能正常工作（+1）。 - Jose Manuel Abarca Rodríguez

Answer 2

以下有两个选项：

<button>multiline<br>button<br>text</button>

或者

<input type="button" value="Carriage&#13;&#10;return&#13;&#10;separators" style="text-align:center;">

- m.edmondson

---

该方法在IE10上无法使用（在Chrome上可以）。 - Mike Keskinov

@MikeKeskinov 我也遇到了同样的问题。那个方法只适用于Chrome浏览器，而<button>标签只适用于IE10，但不适用于Chrome浏览器。你有没有什么方法可以同时适用于Chrome和IE10？ - user2619542

CSS的white-space属性是解决问题的方式，无需手动插入换行符。 - jcarpenter2

Answer 3

这个 CSS 可能适用于 <input type="button" ..：

white-space: normal

- Alex K

---

这不允许您手动操作，但适用于按钮可能超出内容区域（如移动电话）的情况。 - Jordash

Answer 4

是的，它可以这样使用，你也可以像这样使用它

<button>Click here to<br/> start playing</button>

如果你想自己制造断点。

- Allan Kimmer Jensen

Answer 5

改善和美化多行文本的另一种方式是

 <button>Click here to<br/> 
     <span style="color:red;">start playing</span>

   </button>

- Sijo Jose

Answer 6

您可以使用实体在值之间断开文本。请参见以下示例中的实体：

<input style="width:100px;" type="button" value="Click here &#x00A; to &#x00A; start playing">

- NooNa MarJa

---

它在Firefox 55.0.3上不能运行。没有检查其他浏览器。 - yenren