Implement dot-dot in the input and display the remaining words when the mouse moves up

This problem is often encountered in projects. In a content box, since the width of the box is fixed, but there is a lot of content inside, then the requirements must be first at this time, and the extra words must be in dots. The form is hidden. Secondly, when the mouse moves up, all the contents in the text box should be displayed as a title prompt. The way to achieve it is as follows

Diandiandian, I wrote it before the text overflowed. Add the following style to the text box

display:inline-block; //This depends on the situation and add
white-space:nowrap; //Must
overflow:hidden; //Must
text-overflow:ellipsis; //Must

As for the title prompt, you need to add the following code to the input, so that all the content in the text box can be prompted with the title

Added:

I just discovered that in IE8, the select text cannot be displayed normally using this method. It is too pretentious. I finally modified it for a long time and wrote a function call to display it normally

<script></div> <div> <p>function selbox(a){<br> var val = a.val();<br> a.attr("title",val);<br>}</p> </div> <div></script>

By the way, doesn’t this mean the same as the insider style? Why does ie8 use this to display? In IE8, input can be displayed normally, but select cannot be displayed normally. It has to be called like this. Does anyone know why?