IE8中的word-wrap:break-word不起作用。

Question

IE8中的word-wrap:break-word不起作用。

cssinternet-explorer-8word-wrap

53

请问为什么在IE8中word-wrap: break-word无法工作？

我已经在其他浏览器中测试过了，但IE8却不听我的指挥，尽管我看过这个网站上的帖子?

http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx

谢谢

- Sixfoot Studio

页面顶部就写着“CSS { -ms-word-wrap : sWrap }”，你为什么期望未加前缀的版本能够正常工作呢？ - robertc

@robertc：我认为没有前缀的版本通常在IE 8中仍然可以工作？如果不能，那么很多网站在IE 8中都会出现问题。 - Paul D. Waite

@PaulDWaite 我认为这是在测试版中取消前缀的事情之一，最终在正式版本中又添加了前缀？ - robertc

2

我尝试了有前缀和无前缀的版本。而且在他们的示例中，实际上也没有前缀。 - Sixfoot Studio

谢谢大家，最终我成功了。 - Sixfoot Studio

5个回答

19

我发现如果要将word-wrap应用于td（表格单元格），需要对table元素应用样式table-layout: fixed。（适用于IE8标准模式。）

- Marc Stober

这也适用于Chrome。 - NimChimpsky

3

非常感谢！我需要这个来在 Orbeon 渲染器中使用表格单元格的自动换行功能。 - Mido

仅使用table-layout: fixed是不够的。您还需要使用width。 - Shafizadeh

太好了，它可以保持th宽度的完整性。它适用于IE7+、Chrome、Mozilla和Safari。可以像下面这样做，只需给表格标签添加一个类"table-wrap"： .table-wrap {table-layout: fixed;} .table-wrap tr td{word-wrap:break-word;} - Fi Horan

12

尝试使用word-break:break-all;，对于IE8和IE9它是有效的 :)

- Satish Sharma

简单而有效...！ - JPCF

5

想提醒一下，“word-break”和“word-wrap”是两个不同的东西。在下面的例子中，“word-break: break-all;”会将单词“consectetuer”切成两半，而“word-wrap: break-word”则不会。<div style="width: 222px; font: 14px sans-serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> - He Nrik

1

这确实不是同一件事。Break-all会在中间断开单词，即使没有必要。而break-word只有在单词无法独自放在一行时才会断开。 - Rudi Kershaw

-1

在查看了微软的这个示例代码之后：
https://msdn.microsoft.com/en-us/library/ms531186%28VS.85%29.aspx

我通过添加以下内容到文档和头部，成功解决了IE-8的问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

...然后使用这个（官方的）CSS指令：

word-wrap: break-word;

- Magnus

1

看起来有些过于严厉了。我不认为我会建议任何人仅为了一个单词换行而使用IE7可怕的渲染引擎来呈现应用程序。特别是这将使IE9及以上版本呈现为IE7。 - StingeyB

不公平把这个投票打下去！至少对我来说它是有效的。虽然是一个糟糕的解决方案，但仍然是一个解决方案。 - Magnus

-1

您可以使用

-ms-word-break: break-all;

- Abhishek Mehta

请在您的答案中添加一些额外的解释。 - daniula

1

MDN明确指出：

IE8引入了-ms-word-break作为word-break的同义词。不要使用-ms前缀。

- FranBran

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frédéric Hamidi · Accepted Answer

52

如果我没记错的话，word-wrap: break-word; 在 Internet Explorer 8 中是支持的，但是样式化的元素必须要有布局（have layout）。

- Frédéric Hamidi

16

是的。OP链接的页面上就写着：

此属性适用于具有布局的元素。当元素被绝对定位、是块级元素或是具有指定高度或宽度的内联元素时，该元素就具有布局。

- Matt Ball

将 display: inline-block; 添加到一个元素中，可以解决在 IE8 上 word-wrap:break-word; 无法触发的问题。使用 display: inline-block; 给它一个布局，这样在所有浏览器中都能正常工作。拥有布局非常重要。这是一个很好的链接，可以阅读答案。谢谢！ - lowtechsun