css - 样式化特定单词的首字母等

Question

我正在尝试为首字母大而其他字母留有间距的单词设置样式。我当前的解决方案非常丑陋:请参阅 here (以及故障的 jsfiddle here )。

理想情况下，而不是像这样丑陋的东西:<dropcap>T</dropcap><span style="letter-spacing:.2em;">HERE</span><span style="margin-left:-.2em;"> is</span> nothing more unreasonable...

我可以有这样一些明智的东西:<dropcap>THERE</dropcap> is nothing more unreasonable...

有什么想法吗？谢谢。

Answer 1

您可以只使用 :first-letter pseudo-element.

The :first-letter pseudo-element is mainly used for creating common typographical effects like drop caps. This pseudo-element represents the first character of the first formatted line of text in a block-level element, an inline block, a table caption, a table cell, or a list item.

IE8+ 和所有现代浏览器都支持它。

例如:http://jsfiddle.net/HTnBP/4/

---

对于你问题的另一半，尝试:

T<span>HERE</span>

div > span:first-child {
    letter-spacing: .2em;
    margin-right: -.2em
}

http://jsfiddle.net/HTnBP/5/

我真的不明白使用自定义 dropcap 元素有什么意义。除非你不介意添加 extra complexity支持 IE8 及更低版本，或者您根本不关心这些浏览器。