|
效果： text-overflow: ellipsis;不是这么好用的，它必须放在块级或行内块级元素（display为block或inline-block），如div，p，h1-h6等上面，才会对元素里面的直接文本起作用。 代码：[code=Xml width=600px]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS隐藏溢出文本并用省略号表示</title>
<style type="text/css">
.textWrapper{margin:50px auto;width:300px;padding:10px;border:1px solid #ccc;}
.tblTextWrapper {margin:50px auto;width:300px;border:1px solid #ccc; border-collapse:collapse;}
.tblTextWrapper td{ border:1px solid #ccc; border-collapse:collapse;}
.text {white-space: nowrap;overflow:hidden; -o-text-overflow: ellipsis;text-overflow:ellipsis; }
</style>
</head>
<body>
<div class="textWrapper text ">
"Stay hungry, stay foolish";这句话是乔布斯的座右铭，来自Whole Earth Catalog。和该杂志编辑对话，问他这句话的原意。
他的回答："我们必须了解自己的渺小。如果我们不学习，科技发展的速度会让我们五年后被清空。所以，我们必须用初学者谦虚的自觉，
饥饿者渴望的求知态度，来拥抱未来的知识。"
</div>
<p class="textWrapper text ">
"Stay hungry, stay foolish";这句话是乔布斯的座右铭，来自Whole Earth Catalog。和该杂志编辑对话，问他这句话的原意。
他的回答："我们必须了解自己的渺小。如果我们不学习，科技发展的速度会让我们五年后被清空。所以，我们必须用初学者谦虚的自觉，
饥饿者渴望的求知态度，来拥抱未来的知识。"
</p>
<div class="textWrapper text ">
<p>
"Stay hungry, stay foolish";这句话是乔布斯的座右铭，来自Whole Earth Catalog。和该杂志编辑对话，问他这句话的原意。
他的回答："我们必须了解自己的渺小。如果我们不学习，科技发展的速度会让我们五年后被清空。所以，我们必须用初学者谦虚的自觉，
饥饿者渴望的求知态度，来拥抱未来的知识。"
</p>
</div>
<table cellpadding="0" cellspacing="0" border="0" class="tblTextWrapper ">
<tr>
<td>
<div class="text " style="width:300px;padding:10px;">
"Stay hungry, stay foolish";这句话是乔布斯的座右铭，来自Whole Earth Catalog。和该杂志编辑对话，问他这句话的原意。
他的回答："我们必须了解自己的渺小。如果我们不学习，科技发展的速度会让我们五年后被清空。所以，我们必须用初学者谦虚的自觉，
饥饿者渴望的求知态度，来拥抱未来的知识。"
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="tblTextWrapper">
<tr>
<td class="text " >
"Stay hungry, stay foolish";这句话是乔布斯的座右铭，来自Whole Earth Catalog。和该杂志编辑对话，问他这句话的原意。
他的回答："我们必须了解自己的渺小。如果我们不学习，科技发展的速度会让我们五年后被清空。所以，我们必须用初学者谦虚的自觉，
饥饿者渴望的求知态度，来拥抱未来的知识。"
</td>
</tr>
</table>
</body>
</html>[/code]解释：下面的代码是为了考虑兼容性 -o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */ 总结：要用css省略溢出的文字，首先，容器一定要是块级元素，块级元素宽度要固定，然后必须设置下面的属性： 1 | white-space: nowrap;overflow:hidden; -o-text-overflow: ellipsis;text-overflow:ellipsis; |
| 
/1 
|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛
( 豫ICP备2022021143号-1 )
发表于 2013-4-9 17:25:53
置顶卡
变色卡
千斤顶