使用了
p.titleholder {
font-family: ms sans serif, arial;
font-size: 8pt;
width: 100;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
如何在鼠标移上时,或者使用其他方式来显示完整信息?
天蓬老师2017-04-17 13:01:05
The simplest way is to add the title
attribute to the tag and assign the content to be displayed.
<p title="全部内容">部分内容</p>
阿神2017-04-17 13:01:05
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
ringa_lee2017-04-17 13:01:05
p.titleholder:hover {
overflow: visible;
}
Not sure if this effect is what you want?
巴扎黑2017-04-17 13:01:05
Is that so?
<!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>
迷茫2017-04-17 13:01:05
If the default style of the title does not meet product expectations, customization is a good choice; see demo
PHP中文网2017-04-17 13:01:05
Write multiple classes directly and add the class when the mouse passes over it. Just remove the styles that exceed the ellipsis display