在input中實現點點點與當鼠標移上去時顯示剩余的字

項目中經常會遇到這個問題，在一個內容框中，由於框的寬度是固定的，但是里面的內容卻有很多，那么這個時候需求里就要求第一，多余的字要以點點點的形式隱藏，第二，當鼠標移上去的時候要以title提示的方式顯示文本框里的所有內容。實現的方式如下

點點點，文字溢出之前有寫到。給文本框添加如下樣式

    display:inline-block;   //這個看情況加
    white-space:nowrap;    //必須
    overflow:hidden;     //必須
    text-overflow:ellipsis;    //必須

而title提示則要在input添加以下代碼，這樣既可實現用title提示文本框中所有內容

<input onmouseover="this.title=this.value">

 

補充：

剛剛發現在ie8中，select用這個方法還不能正常的提示文字，太矯情了，最后修改了半天，寫了個函數調用才正常顯示

<select onmouseover="selbox($(this))" ></select>

<script>

function selbox(a){
var val = a.val();
a.attr("title",val);
}

</script>

話說這意思不是跟行內式一樣樣的么？為什么ie8用這個才能顯示呢？在ie8中input是可以正常顯示的，唯獨select不能正常顯示，非得這么調用一下才行，有知道是為啥么？