How to solve the problem that the select option is too long to display the setting overflow:hidden does not work in IE9
This article introduces the knowledge of "how to solve the problem that the select option is too long to display the setting of overflow:hidden does not work in IE9". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
In the following figure, there is a select for dojo, and the selected item is too long to display correctly in IE9.
The css setting is as follows, and "overflow:hidden" does not work.
The code is as follows:
. my-select {
Max-width: 200px
Overflow: hidden
Word-break: break-all
Text-overflow: ellipsis
}
After adding "float:left" and adjusting the width appropriately, the select displays normally as shown in the following figure.
The code is as follows:
. my-select {
Float:left
Width: 200px
Max-width: 200px
Overflow: hidden
Word-break: break-all
Text-overflow: ellipsis
}
If there is no width, the options with fewer characters are displayed as follows. With width, max-width can be deleted.
This is the end of the content of "how to solve the problem that the select option is too long to display the setting overflow:hidden does not work in IE9". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!