DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS實現段落首行縮進兩個字符不再使用空格
CSS實現段落首行縮進兩個字符不再使用空格
編輯:布局實例     

想讓段落前面空兩個字的距離不使用空格了,text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字,感興趣的朋友可以參考下,希望對大家有所幫助

 

段落前面空兩個字的距離,不要再使用空格了。應該使用首行縮進text-indent。text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字。

復制代碼 代碼如下:
<style type="text/css">
p{
text-indent: 2em; /*em是相對單位,2em即現在一個字大小的兩倍*/
}
</style>


注:div標簽不要忘記起始符。text-indent只對p或div標簽有效,對br標簽不生效,原因是br標簽是換行標簽不是分段標簽。

用CSS實現段落首縮進兩個字符,實現首行縮進的通用方法是加四個小角空格。

在style裡定義如下縮進樣式:.suojin{text-indent:2em}

在需要縮進的地方使用class="suojin"即可,比如用一個div定義一整塊段落首先縮進,

凡在div區域裡,浏覽器一碰上p語句(即一個新段的開始),就會執行.suojin所定義的縮進。

也可以在正文中使用嵌入式CSS樣式來定義,下面舉個實例(使用時請將尖括號改為小角尖括號):

<div style="text-indent:2em">
<p>段落一</p>
<p>段落二</p>
<p>段落三<p>
</div>

兩種方法各有長處短處,可根據需要決定使用哪一種方法。

        :更多精彩教程請關注網頁設計教程 欄目,

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved