純 CSS 單行文本溢出追加省略號

樣式代碼,四個屬性都是必須的,並且寬度必須設在當前容器上,父容器定寬無效:

<span style="font-family:Microsoft YaHei;font-size:12px;">.box {
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}</span>

示例1:

<span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>text overflow ellipsis</title>
	<style>
		.box {
			width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
<h1>text overflow ellipsis</h1>

<div class="box">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
</body>
</html></span>
參考:http://www.cnblogs.com/lianjun/archive/2011/03/24/1993479.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章