Question

我有一个按钮，我想要添加两个文字标签，其字体和大小不同。我还希望每个文本标签都出现在自己的行上。例如，如果我的标签是ABCD和example，请按照我希望它们在按钮上显示的方式：

ABCD
^的例如的

这是我尝试过的。是否可以将不同的样式应用于value属性的不同部分？

<input style="width:170px; height:100px; font-size:90%; type="button" value="ABCD example">

Answer 1

尝试<button>元素：

<button><span style="font-size:110%">ABCD</span> example</button>

与<input type="button">

大致相同

Answer 2

您可以使用button而不是input，并在其中使用两个span标记。例如：

<button class="btn btn-primary" type="button">
    <span style="font-size:14px;">ABCD</span>
    <span style="font-size:10px;">example</span>
</button>

现场示例：http://jsfiddle.net/h6jq7ep2/

为了简单起见，我使用了内联样式，但显然您可以为每个class分配一个span相应的CSS。

Answer 3

你不能这样做，你想在字符串的一部分上应用样式，没有简单的方法这样做，你应该使用图像代替。这是纯粹的设计目的。只需搜索在线按钮图像制作器，你会发现很多。

将两种不同的字体添加到同一按钮

3 个答案: