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

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

非***星分类：Html5 人气：3901 回帖：7 发布于6年前收藏

使用了

div.titleholder { 
font-family: ms sans serif, arial; 
font-size: 8pt; 
width: 100; 

text-overflow: ellipsis;    
overflow: hidden; 
white-space: nowrap; 
}

如何在鼠标移上时，或者使用其他方式来显示完整信息？

标签：css html5

讨论这个帖子（7）垃圾回帖将一律封号处理……

Lv6 码匠

wo***fp CEO 6年前#1

直接写多个class 在鼠标经过的时候添加上该class，去除超出显示省略号的样式就行了

Lv6 码匠

不***) 软件测试工程师 6年前#2

div.titleholder:hover {
  overflow: visible;
}

不太確定這樣的效果是否是您要的？

Lv3 码奴

馨***2 移动开发工程师 6年前#3

如果title的默认样式不符合产品预期的话，自定义是个不错的选择；看 demo

Lv5 码农

迷***雾软件测试工程师 6年前#4

最简单的做法，给标签增加title属性，并赋上要显示的内容。

<div title="全部内容">部分内容</div>

Lv1 新人

编***魔职业无 6年前#5

是这样么？

<!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>

Lv1 新人

鬼***5 UI设计师 6年前#6

加个 title 属性~

Lv2 入门

jh***23 Web前端工程师 6年前#7

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

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取