HTML:我可以在多行显示按钮文字吗?

Dag*_*ang 51 html css

我有一个长文本按钮,如"点击此处开始播放".我想控制宽度并以多行显示文本.是否可以在html/css中?

小智 101

是的,你可以使用white-space css属性在多行上拥有它:)

input[type="submit"] {
    white-space: normal;
    width: 100px;
}
Run Code Online (Sandbox Code Playgroud)
<input type="submit" value="Some long text that won't fit." />
Run Code Online (Sandbox Code Playgroud)

将此添加到您的元素

 white-space: normal;
 width: 100px;
Run Code Online (Sandbox Code Playgroud)


m.e*_*son 36

两种选择:

<button>multiline<br/>button<br/>text</button>
Run Code Online (Sandbox Code Playgroud)

要么

 <input type="button" value="Carriage&#13;&#10;return&#13;&#10;separators" style="text-align:center;">
Run Code Online (Sandbox Code Playgroud)

  • css white-space属性是要走的路,不需要手动插入换行符 (3认同)
  • 使用&#13;&#10;的方法 不适用于IE10(适用于Chrome) (2认同)

Ale*_*x K 19

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

white-space: normal
Run Code Online (Sandbox Code Playgroud)


All*_*sen 7

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

<button>Click here to<br/> start playing</button>
Run Code Online (Sandbox Code Playgroud)

如果你想自己休息一下


Sij*_*ose 5

改进多行文本并设计其样式的另一种方法是

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

   </button>
Run Code Online (Sandbox Code Playgroud)