<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> RunJS 演示代码 </title> <!-- 如果是id属性,将.改为#即可 --> <style> .content{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:200px; } .content:hover {height: auto;white-space: normal;} </style> </head> <body> <div> js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 </div> <div> js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 </div> </body> </html>
存在的问题:
当鼠标悬停时,省略的内容在全部显示出来之后,会挤压下方的内容,当是多行显示时,容易造成页面错乱.如图:
