先看個執行個體上代碼。應用到你要沉的那個字就ok了。
例1
| 代碼如下 |
複製代碼 |
.first {
font-size:320%; /*字型百分比增大*/
float:left; /*左浮動*/
} |
分析：
1.字型增大。
2.左浮動，然後下一行的就提上來了
例2
| 代碼如下 |
複製代碼 |
.menglong,.menglong2,.menglong3 {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
margin:5px 0;
}
.menglong:first-line {
color:red;
}
.menglong:first-letter {
font-size:350%;
font-weight:bold;
color:#000;
float:left;
}
.menglong2:first-line {
letter-spacing:-2px;
}
.menglong3{
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> |
