有关首行首字下沉的实现原理及代码

前端技术 2023/09/04 CSS

下面是两个个小技巧，一个是很多报刊中的首字下沉，其实很简单，原理就是在样式中添加后缀即可。还有一个是对第一行文字进行单独样式。给这段标签添加后缀即可。这两个小技巧分别都兼容低版本。非常实用的小技巧哟。下面是一段小例子。
css代码：

复制代码
代码如下:

.dyfirst,.dyfirst2,.dyfirst3 {
    width:300px;
    border:1px solid #ddd;
    padding:5px;
    font-size:12px;
    margin:5px 0;
}
.dyfirst:first-line {
    color:red;
}
.dyfirst:first-letter {
    font-size:350%;
    font-weight:bold;
    color:#000;
    float:left;
}
.dyfirst2:first-line {
    letter-spacing:-2px;
}
.dyfirst3{
    text-indent:2em;
}


html代码：

复制代码
代码如下:

<!doctype html>
<html dir=\"ltr\" lang=\"zh-CN\">
<head>
<meta charset=\"utf-8\">
<title>CSS首字下沉</title>
</head>
<body>
<div class=\"menglong\">2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration</div>
<div class=\"menglong\">首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色</div>
<div class=\"menglong2\">首行缩进，距离更紧密的.首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的</div>
<div class=\"menglong3\">段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。</div>
</body>
</html>

本文地址：https://www.stayed.cn/item/11224

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案