使用了
div.titleholder {
font-family: ms sans serif, arial;
font-size: 8pt;
width: 100;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
如何在鼠标移上时,或者使用其他方式来显示完整信息?
div.titleholder:hover {
text-overflow:inherit;
overflow: visible;
white-space: pre-line;
}
http://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow_hover
最简单的做法,给标签增加title
属性,并赋上要显示的内容。
<div title="全部内容">部分内容</div>
是这样么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div { width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
div:hover { width:auto; }
</style>
</head>
<body>
<div>算哒垃圾死分拉萨机aldj都是sd</div>
</body>
</html>
加个 title
属性~
div.titleholder:hover {
overflow: visible;
}
不太確定這樣的效果是否是您要的?
如果title的默认样式不符合产品预期的话,自定义是个不错的选择;看 demo
直接写多个class 在鼠标经过的时候添加上该class,去除超出显示省略号的样式就行了