返回首頁
當前位置: 主頁 > 網絡編程 > Asp實例教程 >

css 溢出內容用省略號隱藏實現效果

時間:2012-04-15 18:57來源:知行網www.gbjajh.tw 編輯:麥田守望者

語法:

text-overflow : clip | ellipsis

參數:

clip : 不顯示省略標記(…),而是簡單的裁切

ellipsis : 當對象內文本溢出時顯示省略標記(…)

說明:

設置或檢索是否使用一個省略標記(…)標示對象內文本的溢出。

對應的腳本特性為textOverflow。請參閱我編寫的其他書目。

示例:

div { text-overflow : clip; }

看起來不錯,我們測試一下
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>css文字截斷____dowhatyouwant</title>
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
</head>
<body>
<div class=”test”>我來測試一下這個文字截斷是不是真的有效果</div>
</body>
</html>
這個時候顯示的就是正常的了

text-overflow屬性僅是注解,當文本溢出時是否顯示省略標記。并不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。還必須定 義:強制文本在一行內顯示(white-space:nowrap)及溢出內容為隱藏(overflow:hidden)。只有這樣才能實現溢出文本顯示 省略號的效果。
一、僅定義text-overflow:ellipsis; 不能實現省略號效果。

二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實現省略號效果

------分隔線----------------------------
標簽(Tag):asp asp技巧 asp實例教程 asp源代碼 asp基礎教程
------分隔線----------------------------
推薦內容
猜你感興趣
黑龙江快乐十分20190730开奖结果