CSS用text-overflow可以處理超出溢出顯示省略號(hào)

2022-06-12發(fā)布者：ylm大?。?/span> 下載：0

文件大小:

軟件介紹

一、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ō)明：
CSS text-overflow設(shè)置或檢索是否使用一個(gè)省略號(hào)標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本文字的溢出。

要想實(shí)現(xiàn)顯示不完內(nèi)容將顯示省略號(hào)代替，還需要html nobr標(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:hidden css樣式，用于css隱藏超出內(nèi)容，避免內(nèi)容過(guò)多溢出li對(duì)象。

3、完整css+div的html源代碼：

 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>text-overflow案例在線演示 www.divcss5.com</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<style type="text/css"> 

*{ padding:0; margin:0} 

a{ text-decoration:none;color:#6699ff} 

ul,li{ list-style:none; text-align:left} 

 

#divcss5{border:1px #ff8000 solid; padding:10px; width:150px; 

margin-left:10px; margin-top:10px} 

#divcss5 li{width:150px;height:24px;line-height:24px; font-size:12px; 

color:#6699ff;overflow:hidden;text-overflow:ellipsis; 

border-bottom:1px #ff8000 dashed;} 

#divcss5 li a:hover{ color:#333} 

/* css注釋說(shuō)明：為了便于截圖、文章中能排版完整 所以css代碼進(jìn)行換行 不影響功能 */ 

</style> 

</head> 

<body> 

<ul id="divcss5"> 

<li><a href="#"><nobr>&#8226; 顯示不完顯示省略號(hào)，測(cè)試內(nèi)容</nobr></a></li> 

<li><a href="#"><nobr>&#8226; 第二排測(cè)試內(nèi)容超出顯示省</nobr></a></li> 

<li><a href="#"><nobr>&#8226; 能顯示完幾個(gè)字</nobr></a></li> 

</ul> 

</body> 

</html> 

 

4、css省略號(hào)布局實(shí)例截圖

過(guò)多文字li標(biāo)簽出現(xiàn)使用css省略號(hào)樣式截圖

image.png使用text-overflow樣式讓顯示不完內(nèi)容通過(guò)css實(shí)現(xiàn)省略號(hào)排版

三、text-overflow省略號(hào)樣式總結(jié)   -   TOP

要想隱藏溢出內(nèi)容同時(shí)又想讓過(guò)多內(nèi)容以省略號(hào)樣式顯示，需要用到css overflow,和text-overflow樣式，同時(shí)避免文字自動(dòng)換行我們使用html nobr標(biāo)簽強(qiáng)制內(nèi)容不換行，使用使用注意這幾個(gè)CSS樣式和HTML標(biāo)簽配合使用才能達(dá)到多余文字內(nèi)容出現(xiàn)省略號(hào)樣式，大家下來(lái)靈活運(yùn)用多次實(shí)踐即可。

發(fā)表評(píng)論(共0條評(píng)論)
請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)，評(píng)論內(nèi)容只代表網(wǎng)友觀點(diǎn)，發(fā)表審核后顯示！

版權(quán)聲明：

1 本站所有資源（含游戲）均是軟件作者、開(kāi)發(fā)商投稿，任何涉及商業(yè)盈利目的均不得使用，否則產(chǎn)生的一切后果將由您自己承擔(dān)！

2 本站將不對(duì)任何資源負(fù)法律責(zé)任，所有資源請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除。

3 若有關(guān)在線投稿、無(wú)法下載等問(wèn)題，請(qǐng)與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標(biāo)等，請(qǐng)立刻聯(lián)系我們并具體說(shuō)明情況后，本站將盡快處理刪除，聯(lián)系QQ:2499894784

返回頂部