您的位置：首页 > Web前端 > CSS

超出div宽度范围的文字进行省略号省略，在鼠标移上去以后显示完整的内容

2017-02-20 11:02 1041 查看

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; 只对英文起作用，以单词作为换行的依据）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css div

相关文章推荐

新的分享

章节导航