CSS之first-letter 和first-line

最新推荐文章于 2024-07-11 10:19:46 发布

qq_37852483

最新推荐文章于 2024-07-11 10:19:46 发布

阅读量1.1k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

first-letter 和first-line只能使用在块级元素注意了

<html>
<head>
<style type="text/css">
span::first-line
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
color:red;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>

</body>
</html>

结果是span第一个字母不改变什么样式

在这里插入图片描述

当我们将span改成display:block时候

<html>
<head>
<style type="text/css">
span:first-letter
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
color: red;
}
span{
	display: block;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>

</body>
</html>