首頁 咨詢中心 IT學堂
css text-overflow 文字顯示不完就輸出省略號......

通過css的text-overflow屬性設置成ellipsis,就可以實現文字標簽內顯示不完就自動顯示省略號......。能夠顯示完就不顯示省略號;NOBR標簽可以讓文字一行顯示而不分行。也可以通過css white-space: nowrap設置文字不換行,

 

有時為了避免文本文字內容超出一定寬度后溢出,我們想要溢出的部分不顯示但用省略號(...)顯示,這個時候我們可以使用CSS text-overflow文本溢出省略號屬性樣式實現。

 

一、text-overflow省略號樣式語法結構 text-overflow語法: text-overflow : clip | ellipsis text-overflow參數值和解釋: clip :  不顯示省略標記(...),而是簡單的裁切 ellipsis :  當對象內文本溢出時顯示省略標記(...) text-overflow應用說明: CSS text-overflow設置或檢索是否使用一個省略號標記(...)標示對象內文本文字的溢出。 要想實現顯示不完內容將顯示省略號代替,還需要html nobr標簽完成(nobr禁止換行標簽)

 

在web開發過程中,常常會遇到要讓布局中的某些文本根據寬度來顯示,如果超過最大寬度仍然顯示不完的,就顯示為省略號的情況,添加下面的CSS樣式表就能實現這種效果,但是這種效果只適用于單行顯示的文本。

 

 

首先給用于放文本的標簽元素設置一個寬度值,并設置溢出屬性overflow為溢出隱藏。

width: 245px;

overflow: hidden;

 

設置文本縮略的樣式為"..."

white-space: nowrap;

text-overflow: ellipsis;



例子

<!DOCTYPE html>    

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

<head>    

<title>text-overflow案例在線演示</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注釋說明:為了便于截圖、文章中能排版完整 所以css代碼進行換行 不影響功能 */    

</style>    

</head>    

<body>    

<ul id="divcss5">    

<li><a href="#"><nobr>#8226; 顯示不完顯示省略號,測試內容</nobr></a></li>    

<li><a href="#"><nobr>#8226; 第二排測試內容超出顯示省</nobr></a></li>    

<li><a href="#"><nobr>#8226; 能顯示完幾個字</nobr></a></li>    

</ul>    

</body>    

</html>

上一篇 怎么把JPG等格式的圖片轉換成svg格式的矢量圖形格式
上一篇 CSS3中:nth-child和:nth-of-type的區別深入理解
本方鏈接: http://www.saboomcams.com/5/15572.html
亚洲一区日韩AV