jQuery - IE8 select option will not break/wrap text in a dropdown

问题

Using jQuery 1.9.1 & have the following code in my CSS for the web page:

.breakword {
-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
     word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
font-size: 0.9em; font-weight: normal;
}

The HTML code has:

<td class="breakword" align="left" style="width:54%;vertical-align:middle;">
      <select name="vlist" id="vlist" class="choices">
    </select>
</td>

The select above is populated with results from a SQL query.

It just so happens that one of the items retrieved from the table is longer than the input field. In Firefox, it displays fine on multiple lines. In IE8 however, I cannot get it to display except on 1 line. Also, it will overlay the field next to it.

The data retrieved would be:

<Row>
  <ID>15</ID>
  <vtext>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</vtext>
</Row>
<Row>
  <ID>16</ID>
  <vtext>This is a test item for the dropdown</vtext>
</Row>

What am I missing about getting this to function properly in IE8?

回答1:

Two issues with the code above

Table cells, ignore widths and expand to accommodate their content
Furthermore, select elements, will grow with their content, unless you specify a width, which will make the element small, but the dropdown list will still span it's full size;

In order to achieve what you want, either set a static width to your select element,

<select style="width:200px"></select>

or have it scale with its table cell. See example JSFiddle here

回答2:

SELECT (radio and checkbox included) elements are rendered by the OS (not really HTML) and doesn't fully respect CSS, especially in older browsers like IE8.

来源：https://stackoverflow.com/questions/17843633/jquery-ie8-select-option-will-not-break-wrap-text-in-a-dropdown

标签

jquery

css

drop-down-menu

internet-explorer-8