纯 CSS 单行文本溢出追加省略号

转自:http://www.mangguo.org/text-overflow-ellipsis/

样式代码,四个属性都是必须的,并且宽度必须设在当前容器上,父容器定宽无效:

.box {
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

示例1:

<!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>



参考:http://www.cnblogs.com/lianjun/archive/2011/03/24/1993479.html


posted @ 2012-11-02 14:50  hdchangchang  阅读(101)  评论(0编辑  收藏  举报