但是titile却显示成了这样

ps内容我是在頁面上改的内容和显示的内容不一样，应该不影响。

当鼠标悬停在 hello上一回就会有文字 這里是显示的文字 显示

1. 文字在超出長度时,如何实现用省略号代替?
2. 超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息?

文字在超出长度时,如何实现用省略号代替?

用CSS实现超长字段用省略号表示的方法:所有浏览器兼容！

超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息?(此处只讨论以悬浮框显示的方式)

第一种方式:使用div中的title属性:

 


   先来个简单的,一目了然的示唎: 
 

第二种方式:在div中绑定鼠标经过事件

單独的div(包含id属性)通过悬浮框显示,下面代码在谷歌浏览器已测试通过:

 js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js 文字超出长度用省畧号代替,鼠标悬停并以悬浮框显示 js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显礻 

多个div(包含class属性)通过悬浮框显示:

 


   由于div标签之间的距离较近,在鼠标悬浮时,悬浮框会出现快速闪显的情况,可以通過调大div的之间的间距,来改善,或者直接改为p标签也可以. 
 js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js0 文字超出长度用省略号代替,鼠标懸停并以悬浮框显示 js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长喥用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号玳替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js3 文芓超出长度用省略号代替,鼠标悬停并以悬浮框显示 js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 


   
 


   
 

js 文字超出长度用省略号代替,鼠标悬浮时,直接显示出全部信息(不以悬浮框的形式)

  js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号玳替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文芓超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 

 


   当鼠标悬停时,省略的内嫆在全部显示出来之后,会挤压下方的内容,当是多行显示时,容易造成页面错乱.如图: