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

Question

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

我需要按钮文本作为

你好世界

W 为斜体

我用过“Hello World”

score 2 · Accepted Answer

尝试：

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

score 0 · Accepted Answer

0

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

于 2013-09-11T10:19:12.643 回答

score 0 · Accepted Answer

0

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

于 2013-09-11T10:19:45.067 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

button您可以在元素内使用任何文本级（短语级）标记。

但是，在一个单词中仅斜体一个字母在排版上是不合适的。但是，相同的技术方法适用于可能真正区分的方法，例如粗体（b元素）或颜色。

score 0 · Accepted Answer

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

最终可能是这样的：

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

像这样的HTML。

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

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

你也可以这样做<button>Hello <em>W</em>orld</button>。

score 0 · Accepted Answer

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

<p>This is a text</p> 

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

8 回答 8