6.5日音訊,CSS超出顯點(diǎn)的應(yīng)用情形和實(shí)用分析。在網(wǎng)頁(yè)制作時(shí)，有時(shí)為了實(shí)現(xiàn)整齊有規(guī)律的表顯方式，避免文字多了溢出的現(xiàn)象，我們就可以使用css語(yǔ)法來(lái)對(duì)它進(jìn)行設(shè)置，當(dāng)然我們也可以在程序中對(duì)它進(jìn)行控制，我們今天就看一下，如何用css來(lái)進(jìn)行較好的控制。
一、text-overflow省略號(hào)樣式語(yǔ)法結(jié)構(gòu)-TOP
text-overflow語(yǔ)法：
text-overflow:clip|ellipsis
text-overflow參數(shù)值和解釋：
clip:不顯示省略標(biāo)記（...），而是簡(jiǎn)單的裁切
ellipsis:當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）
text-overflow應(yīng)用說(shuō)明：
CSStext-overflow設(shè)置或檢索是否使用一個(gè)省略號(hào)標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本文字的溢出。
要想實(shí)現(xiàn)顯示不完內(nèi)容將顯示省略號(hào)代替，還需要htmlnobr標(biāo)簽完成（nobr禁止換行標(biāo)簽）
二、text-overflow應(yīng)用案例-TOP
常常遇到文章標(biāo)題列表布局排版時(shí)候，有的標(biāo)題比較長(zhǎng)顯示不完，這個(gè)時(shí)候即又不想換行顯示，又想顯示不完的內(nèi)容自動(dòng)出現(xiàn)省略號(hào)樣式。
顯示不完內(nèi)容省略號(hào)替代截圖
顯示不完的文字內(nèi)容通過(guò)css顯示省略號(hào)
1、實(shí)現(xiàn)方法
1）、對(duì)象設(shè)置text-overflow:ellipsis;省略號(hào)樣式
2）、使用nobr標(biāo)簽，強(qiáng)制讓內(nèi)容不換行（css換行、css不換行）。
2、案例描述
我們假設(shè)3個(gè)標(biāo)題的li列表布局，對(duì)li對(duì)象設(shè)置一定寬度和高度，對(duì)前兩個(gè)li列表內(nèi)容放過(guò)多測(cè)試文字，第三個(gè)li列表放入可顯示完測(cè)試文字。因?yàn)槲覀円苊鈨?nèi)容過(guò)多撐破對(duì)象，所以我們對(duì)li再設(shè)一個(gè)overflow:hiddencss樣式，用于css隱藏超出內(nèi)容，避免內(nèi)容過(guò)多溢出li對(duì)象。
3、完整css+div的html源代碼：
<!DOCTYPEhtml>
<head>
<title>text-overflow案例在線演示www.divcss5.com</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
*{padding:0;margin:0}
a{text-decoration:none;color:#6699ff}
ul,li{list-style:none;text-align:left}
#divcss5{border:1px#ff8000solid;padding:10px;width:150px;
margin-left:10px;margin-top:10px}
#divcss5li{width:150px;height:24px;line-height:24px;font-size:12px;
color:#6699ff;overflow:hidden;text-overflow:ellipsis;
border-bottom:1px#ff8000dashed;}
#divcss5lia:hover{color:#333}
/*css注釋說(shuō)明：為了便于截圖、文章中能排版完整所以css代碼進(jìn)行換行不影響功能*/
</style>
</head>
<body>
<ulid="divcss5">
<li><ahref="#"><nobr>•顯示不完顯示省略號(hào)，測(cè)試內(nèi)容</nobr></a></li>
<li><ahref="#"><nobr>•第二排測(cè)試內(nèi)容超出顯示省</nobr></a></li>
<li><ahref="#"><nobr>•能顯示完幾個(gè)字</nobr></a></li>
</ul>
</body>
</html>
以上用到CSS樣式，如有不會(huì)可以進(jìn)入學(xué)習(xí)
1）、cssmargin
2)、cssmargin-left
3)、cssmargin-right
4、csspadding
5)、cssfont-size字體大小
6）、css字體顏色color
7)、cssborder邊框
8）、cssline-height行高
9）、css寬度
4、css省略號(hào)布局實(shí)例截圖
過(guò)多文字li標(biāo)簽出現(xiàn)使用css省略號(hào)樣式截圖
使用text-overflow樣式讓顯示不完內(nèi)容通過(guò)css實(shí)現(xiàn)省略號(hào)排版
三、text-overflow省略號(hào)樣式總結(jié)
要想隱藏溢出內(nèi)容同時(shí)又想讓過(guò)多內(nèi)容以省略號(hào)樣式顯示，需要用到cssoverflow,和text-overflow樣式，同時(shí)避免文字自動(dòng)換行我們使用htmlnobr標(biāo)簽強(qiáng)制內(nèi)容不換行，使用使用注意這幾個(gè)CSS樣式和HTML標(biāo)簽配合使用才能達(dá)到多余文字內(nèi)容出現(xiàn)省略號(hào)樣式，大家下來(lái)靈活運(yùn)用多次實(shí)踐即可，如果大家喜歡多學(xué)一點(diǎn)，那么完全可以學(xué)習(xí)一下php語(yǔ)言，了解下它的功能和用法，總之多一種解決方法也是好的，靈活運(yùn)用即可。
