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

Div+css: 用截取的方法,标题只显示十个字符,剩下的用…表示,鼠标放上去之后,会显示全部内容。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ellipsistitle>
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; 只对英文起作用,以单词作为换行的依据)

你可能感兴趣的:(html5,css3)