造型某个单词的第一个字母等

我试图用一个大的第一个字母和其他字母的间距来设计一个单词。我目前的解决方案非常难看：请参阅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...

任何想法？谢谢。

来源

2011-06-26 76987

你的jsfiddle出现故障，因为你已经包裹你的CSS在''，它已经为你做了。它也把你的代码包装在'html'和'body'中。这是更喜欢它：http://jsfiddle.net/HTnBP/6/ – thirtydot

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

的:first-letter伪元素主要用于制作般的落差帽共同印刷效果。此伪元素表示块级元素中第一个格式化的行文本的第一个字符，内嵌块，表格标题，表格单元格或列表项目的。

它支持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或更低版本，或者你根本不关心这些浏览器。

来源

2011-06-26 19:28:58 thirtydot

我的段落中有很多跨度和div，我有点担心你的方法。有没有办法做到这一点？：'其中'。谢谢。 – 76987

'：first-letter'不能用于像span这样的内联元素，所以对于这个HTML结构，我建议：http://jsfiddle.net/HTnBP/11/，或者如果你喜欢你的'dropcap'元素：http://jsfiddle.net/HTnBP/12/ – thirtydot

很酷，非常感谢。我希望我知道_why_'：first-letter'对内联元素不起作用，但是知道它肯定有助于解释很多。 – 76987

或者，也许你可以使用这个JS的解决方案，我发现

http://webplatform.adobe.com/dropcap.js/

来源

2014-11-19 09:56:20

造型某个单词的第一个字母等

回答

相关问题