我們在使用word的時候經常遇到需要使段落首字下沉的時候。那么，在網頁上如何通過CSS也實作段落首字下沉呢？我們在網站建設的專案中，時常能看到了一種文字展示的特殊效果：首字下沉。于是小編花了幾分鐘考慮了一下使用方法，腦測之后，又敲了敲代碼實作了一下，寫出來與大家分享一下，在這里除了提供了基本解題方法之外，也書寫了我的思考程序以及對其他兩種可能能用的方法的思考。
效果圖如下：
段落首字下沉實作方法：
1、before偽元素實作
2、使用標簽控制
3、first-letter
段落首字下沉方法分析：
第一種方法果斷舍棄，原因在于，資料明顯是從后臺傳遞的，那么此時我們不可能確定后臺會傳遞什么資料。第三種方法也舍棄，原因在于無法實作一個字對應兩行的現象。針對第二種方法，進行了如下思考：
三個標簽（左側“獨”是一個標簽、右側兩行一個標簽，兩行下面的正常文字一個標簽）——果斷舍棄這種書寫方法，原因在于，對于前后臺資料互動實在是太麻煩了。維護起來非常不方便。
使用兩個標簽，并針對第一個標簽進行浮動。利用浮動自身的特性——相信對浮動有所了解的人都會想到浮動元素的基本特性——忘記的話，可以查看該文《浮動元素有何性質》。可以查看文中的第二個例子。此處，對于后臺資料傳遞方面，利用字串截取，將文字放置于兩種標簽中。可以用JS截取，也可以直接在獲取的時候進行截取（利用后臺）
段落首字下沉代碼實作案例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>獨行冰海</title>
<style>
.wrap span {
float: left;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrap">
<span>獨</span><p>行冰海——白色，是我的世界的顏色，獨特而隱逸。我的“自由”不單純是不讓別人決定我的人生，還是認識我的個性，維護我的個性，決定我生活目標的代名詞；也從不以“地位”、“權力”為目標，只為了自己心底的夢、珍重的事、守護的情而奮斗。</p>
</div>
</body>
</html>
OK了，以上就是我利用CSS實作段落首字下沉的方法了，希望對你有幫助。
uj5u.com熱心網友回復：
<style type="text/css">.p1{font-size:14px;}
.p1:first-letter{float:left;color:#f00;font-size:2em;font-weight:bold;}
</style>
<p class="p1">啊啊啊啊啊啊</p>
uj5u.com熱心網友回復：
圖片怎么設定啊？讓圖片看起來有首字下沉的效果轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/123055.html
標籤：HTML(CSS)
上一篇：如圖企業微信檔案里的第三步，解密訊息的asp代碼怎么寫？前兩步已經測驗通過。
下一篇：急求大神教我怎么寫這個網頁