使用CSS的首字下沉

vcudknz3  于 2022-12-15  发布在  其他
关注(0)|答案(3)|浏览(140)

我怎样才能使每个段落的第一个字符看起来像这样:

我更喜欢只使用CSS。

eh57zj3b

eh57zj3b1#

p:first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.5em;
    padding-bottom: 0.05em;
    padding-top: 0.2em;
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

根据需要调整字体、填充、line-height
示例:http://jsfiddle.net/RLdw2/

mwg9r5ms

mwg9r5ms2#

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

**一个

以下是图像中显示的满足您要求的确切解决方案
DEMO 2

维基百科解释

ilmyapht

ilmyapht3#

see DEMO here...
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>

相关问题