3

如何使每个段落的第一个字符如下所示:

在此处输入图像描述

我更喜欢只使用 CSS。

4

3 回答 3

4
p:first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.5em;
    padding-bottom: 0.05em;
    padding-top: 0.2em;
}

根据需要调整字体、填充、行高。

示例:http: //jsfiddle.net/RLdw2/

于 2013-02-01T10:09:51.707 回答
2

添加这个 p:first-letter{font-size:50px}

演示


这是图像中显示的满足您要求的确切解决方案

演示 2

维基百科解释

于 2013-02-01T09:59:23.683 回答
0

在此处查看演示...

CSS///

p{ width:300px; border:1px solid #000;}
p:first-letter
{font-size:52px;color:#8A2BE2;font-weight:bold;float: left;margin-top:4px;}

HTML///

<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>


<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>
于 2013-02-01T10:08:48.800 回答