搜尋

首頁  >  問答  >  主體

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 天前1043

全部回覆(7)我來回復

  • 天蓬老师

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

    最簡單的做法,為標籤增加title屬性,並賦上要顯示的內容。

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

    回覆
    0
  • 阿神

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

    p.titleholder:hover {
    文字溢位:繼承;
    溢位:可見;
    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
  • 取消回覆