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