搜索

首页  >  问答  >  正文

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

使用了

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

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

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

PHP中文网PHP中文网2782 天前1044

全部回复(7)我来回复

  • 天蓬老师

    天蓬老师2017-04-17 13:01:05

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

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

    回复
    0
  • 阿神

    阿神2017-04-17 13:01:05

    p.titleholder:hover {
    text-overflow:inherit;
    溢出：可见；
    white-space：行前；
    }

    http://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow_hover

    回复
    0
  • ringa_lee

    ringa_lee2017-04-17 13:01:05

    p.titleholder:hover {
  overflow: visible;
}

    不太确定这样的效果是否是您要的？

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-17 13:01:05

    是这样么？

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

    回复
    0
  • ringa_lee

    ringa_lee2017-04-17 13:01:05

    加个 title 属性~

    回复
    0
  • 迷茫

    迷茫2017-04-17 13:01:05

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

    回复
    0
  • PHP中文网

    PHP中文网2017-04-17 13:01:05

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

    回复
    0
  • 取消回复