Div+css: 用截取的方法，标题只显示十个字符，剩下的用…表示，鼠标放上去之后，会显示全部内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsis</title>
</head>
<body>
<style>
.demo {display: inline-block;*display: inline;*zoom: 1;width: 10em;height: 20px;line-height: 20px;font-size: 12px;overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;}
.demo:hover {height: auto; word-break:break-all; white-space: pre-wrap; text-decoration: none;}
</style>
<a href="#" target="_blank" class="demo" title="这是一段测试用的文本，没有实际意义，只是想达到显示效果。">这是一段测试用的文本，没有实际意义，只是想达到显示效果。</a>
</body>
</html>注释：
Overflow:hidden; /自动隐藏文件/
Text-overflow: ellipsis; /文字隐藏后添加省略号/
White-space:nowrap; /强制不换行/
Width:10em;/不允许出现半汉字截断/
让IE6/IE7支持display:inline-block属性的方法：
先让块元素变为内联，再使用 zoom:1触发块元素layout：
display: inline-block; *display: inline; *zoom: 1;
在.demo : hover中没有加入word-break:break-all; 之前，发现英文占一行，中文占一行，即同行中的中英文不能保持在一行，这是因为white-space: pre-wrap;只对中文起作用，强制换行，而word-break：break-all; 只对英文起作用，以字母作为换行的依据。（word-warp:break-word; 只对英文起作用，以单词作为换行的依据）
5370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
