CSS隐藏超出的文本并省略

猫性男孩 · 发表于 2013-4-9 17:25:53

效果：

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;

		自动登录	找回密码
密码			立即注册

[分享] CSS隐藏超出的文本并省略

站长推荐 /1