中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

5、首字下沉 —— 使用:first-letter

偽對象:first-letter配合font-size、float可以制作首字下沉效果。
比如：

p:first-letter{
 padding: 6px;
 font-size: 32pt;
 float: left;
}

運行代碼框
<style> p:first-letter{ padding: 6px; font-size: 32pt; float: left; } </style> <p> 偽對象:first-letter配合font-size、float可以制作首字下沉效果。 比如： p:first-letter{ padding: 6px; font-size: 32pt; float: left; } </p>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

p.s還有first-line偽類來定義首行樣式

運行代碼框
<style> p:first-line{ color: red } </style> <p> first-line偽類來定義首行樣式first-line偽類來定義首行樣式first-line偽類來定義首行樣式 first-line偽類來定義首行樣式first-line偽類來定義首行樣式first-line偽類來定義首行樣式 first-line偽類來定義首行樣式first-line偽類來定義首行樣式first-line偽類來定義首行樣式 first-line偽類來定義首行樣式first-line偽類來定義首行樣式first-line偽類來定義首行樣式 </p>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

上例中段落的第一行為紅色

6、首行縮進(jìn) —— 使用text-indent

text-indent可以使得容器內(nèi)首行縮進(jìn)一定單位。比如中文段落一般每段前空兩個漢字�？梢赃@么寫：

p{
 text-indent: 2em; /*em是相對單位，2em即現(xiàn)在一個字大小的兩倍*/
}

如果font-size是12px的話，那么text-indent: 2em則縮進(jìn)24px。

運行代碼框
<style> p{ text-indent: 2em; /*em是相對單位，2em即現(xiàn)在一個字大小的兩倍*/ } </style> <p> text-indent可以使得容器內(nèi)首行縮進(jìn)一定單位。比如中文段落一般每段前空兩個漢字�？梢赃@么寫： p{ text-indent: 2em; /*em是相對單位，2em即現(xiàn)在一個字大小的兩倍*/ } 如果font-size是12px的話，那么text-indent: 2em則縮進(jìn)24px。</p>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

7、關(guān)于漢字注音 —— 使用ruby標(biāo)簽和ruby-align屬性

比如說<ruby>注音<rt style="font-size: 11px;">zhu yin</rt></ruby>，可以利用ruby-align設(shè)置對齊方式。這是在CSS手冊里面看到的，具體可以自行查閱ruby-align項。

運行代碼框
<ruby>布魯斯狼<rt style="font-size: 11px;">bu lu si lang</rt></ruby>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

8、固定寬度漢字截斷 —— 使用text-overflow

用后臺語言可以對從數(shù)據(jù)庫里的字段內(nèi)容做截斷處理，比如說截12個漢字（之后用省略號）。但是有時還需要html標(biāo)簽的過濾等，而用CSS來控制則沒有這個問題。比如對列表應(yīng)用以下樣式：

li{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

不過只能處理文字在一行上的截斷，不能處理多行。

9、固定寬度漢字（詞）折行 —— 使用word-break

舉個例子，比如說要在一個固定寬度容器里面顯示很多地名（假設(shè)以空格分隔），為了避免地名中間斷開（即一個字在上面而另一個字折斷到下一行去了）。則可以使用word-break。比如：

<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>

值得注意的是里面的空格不能以&nbsp;代替（最少要有一個軟空格）。

運行代碼框
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all"> 南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海 </div>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

出處：meidengyin的blog
責(zé)任編輯：moby

上一頁 中文排版CSS心得 [1] 下一頁

◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論