Point in input and show the remaining words when the mouse moves up.

Point in input and show the remaining words when the mouse moves up.

This problem is often encountered in projects. In a content box, because the width of the box is fixed, but there are many content in it, the first requirement is required at this time, extra words should be hidden in the form of dots. Second, when the mouse moves up, all the content in the text box should be displayed in the form of a title prompt. The implementation method is as follows:

Click it. It is written before the text overflows. Add the following style to the text box

Display: inline-block; // This is added according to the situation
White-space: nowrap; // required
Overflow: hidden; // required
Text-overflow: ellipsis; // required. If the title prompt is displayed, add the following code in the input file. In this way, you can use the title to prompt all content in the text box <input onmouseover = "this. title = this. value "> supplement: In ie8, It was just found that the select method could not properly prompt the text, which was too emotional. It was last modified for a long time, if a function call is written, <select onmouseover = "selbox ($ (this)"> </select> <script>

Function selbox (){
Var val = a. val ();
A. attr ("title", val );
}

</Script> doesn't this mean anything like intra-row style? Why can I use this to display ie8? In ie8, input can be normally displayed, but select cannot be normally displayed. You have to call this method. Do you know why?