jQuery - IE8选择选项不会打断/包装文本在下拉列表中 [英] jQuery - IE8 select option will not break/wrap text in a dropdown
问题描述
使用jQuery 1.9.1&在我的CSS网页中有以下代码：
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;
}
HTML代码具有：
<td class="breakword" align="left" style="width:54%;vertical-align:middle;">
<select name="vlist" id="vlist" class="choices">
</select>
</td>
上面的 select 一个SQL查询。
The select above is populated with results from a SQL query.
只有这样，发生从表中检索的项目之一比输入字段长。在Firefox中，它在多行上显示精细。在IE8然而，我不能得到它显示，除了1行。此外，它将覆盖它旁边的字段。
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.
检索的数据将是：
<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>
我缺少什么让这在IE8正常工作？
What am I missing about getting this to function properly in IE8?
推荐答案
上述代码有两个问题
- 表格单元格，忽略宽度并展开以适应其内容
- 此外，
select将会随着内容增长，除非您指定宽度，这将使元素小，但下拉列表仍将跨越其完整大小;
- Table cells, ignore widths and expand to accommodate their content
- Furthermore,
selectelements, 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;
为了实现您想要的效果，请为您的select元素设置一个静态宽度。
In order to achieve what you want, either set a static width to your select element,
< select style = 200px>< / select>
请参见示例 JSFiddle此处
这篇关于jQuery - IE8选择选项不会打断/包装文本在下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
