如何区分html5按钮中的单个字母

Question

我需要将单个字母区分为html按钮值中的斜体字体？你能指导我吗？

我需要按钮文字为

Hello * W * orld

W是斜体样式

我用过 “你好世界”

Answer 1

尝试：

<button type="button">Hello <i>W</i>orld</button>

使用样式可能稍好一些（但更详细）：

<button type="button">Hello <i class="italic">W</i>orld</button>

<style>
    em.italic { font-style: italic; }
</style>

Answer 2

您可以使用::first-letter CSS伪元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

可能会结束这样的事情：

button span::first-letter {
   font-style: italic;
}

这样的HTML。

<button>
   Hello <span>World</span>
</button>

你可以在span中添加一个类并相应地重写css规则，会更加安全，因为你可能会得到一些不需要的结果。

您也可以<button>Hello <em>W</em>orld</button>。

Answer 3

像这样使用CSS ::first-letter。

<p>This is a text</p> 

<style>
  p::first-letter{
    color:red;
  }
</style>

Answer 4

<button><i>W</i>orld</button>

Answer 5

<button><em>W</em>orld</button>

Fiddle

Answer 6

如果你使用按钮标签，你可以这样做：

<button>
    Hello <em>W</em>orld
</button>

Answer 7

您可以使用oldschool HTML <em>标记。

<button><em>W</em>orld</button>

Heres a Fiddle.

Answer 8

有几种方法可以做到这一点，但最简单和最健壮的方法是在其中使用<button>元素和i标记：

<button>Hello <i>W</i>orld</button>

您可以在button元素中使用任何文本级（词组级）标记。

但是，从字面上看，在一个单词中只拼写一个字母是不恰当的。但是，相同的技术方法适用于可能真正区分的方法，例如粗体（b元素）或颜色。