word-wrap:break-word 在 IE8 中无法按预期工作
我遵循 this
说有 word-wrap:break- word ,我们需要为表格元素设置“table-layout:fixed”。即使如此,它在 IE8 中也不起作用。我在这里缺少任何基础知识吗?
我附上 IE8 和 IE6 中的屏幕截图。以及 HTML 在 IE8 中是如何呈现的。 (IE8 中包含表格的面板有滚动条。)
从渲染的 HTML 中,我发现该表布局是固定的,样式也被应用。
但即便如此,IE8 也会以不同的方式显示网格。
<table cellspacing="0" rules="all" border="0" id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView" style="border-width:0px;border-style:None;height:150px;width:750px;border-collapse:collapse;**table-layout: fixed**">
<tr class="Row" align="center">
<td align="left" style="width:155px;white-space:nowrap;">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_typeLabel">IT</span>
</td><td align="left" style="width:155px;white-space:nowrap;">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_firstNameLabel">AAA</span>
</td><td align="left" style="width:155px;white-space:nowrap;">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_lastNameLabel">BBB</span>
</td><td align="left" style="width:155px;white-space:nowrap;">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_appReceivedDateLabel">3/01/2011</span>
</td><td align="left" style="width:155px;white-space:nowrap;**WORD-BREAK:BREAK-ALL**">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_commentsLabel">TestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTesting</span>
</td>
</table>
有帮助吗?提前致谢
I followed this
which say that to have word-wrap:break-word , we need to have "table-layout: fixed" for the table element. Even then it is not working in IE8. Am I missing any fundamentals here ?
Iam attaching the screen shot of it in IE8 ans IE6 . And how the HTML is rendered in IE8.
(There is scroll bar for the panel enclosing the Table in IE8.)
From the HTML rendered , i fnd that Table Layout is Fixed and the style is also applied.
But even then IE8 displays the grid in a different manner .
<table cellspacing="0" rules="all" border="0" id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView" style="border-width:0px;border-style:None;height:150px;width:750px;border-collapse:collapse;**table-layout: fixed**">
<tr class="Row" align="center">
<td align="left" style="width:155px;white-space:nowrap;">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_typeLabel">IT</span>
</td><td align="left" style="width:155px;white-space:nowrap;">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_firstNameLabel">AAA</span>
</td><td align="left" style="width:155px;white-space:nowrap;">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_lastNameLabel">BBB</span>
</td><td align="left" style="width:155px;white-space:nowrap;">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_appReceivedDateLabel">3/01/2011</span>
</td><td align="left" style="width:155px;white-space:nowrap;**WORD-BREAK:BREAK-ALL**">
<span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_commentsLabel">TestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTesting</span>
</td>
</table>
Any Help ? Thanks in Advance
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
实际上,我不会担心您的示例中看到的这种人为文本的自动换行(没有空格)。
据说,解决方案之一可能是将内容包装在 div 内并应用宽度和宽度。 div 的自动换行。例如,请参阅此小提琴: http://jsfiddle.net/6Cm3U/1/
Practically speaking, I would not worry about word wrapping for such contrived text as sighted in your example (where there no white space).
Said that, one of the solution could be to wrap the content inside a div and apply width & word-wrap to the div. See this fiddle for example: http://jsfiddle.net/6Cm3U/1/