wbr标签在IE中无效。

Question

软换行在IE中似乎无效。是否有任何替代方法或如何使其起作用？

http://fiddle.jshell.net/88q54/1/

body {
font-size: 272px;    
}


<div>W<wbr/>o<wbr/>r<wbr/>d</div>

我希望当单词长度超过窗口宽度时可以自动换行。在webkit和mozilla中可以实现，但是IE（10/11）无法实现。

我知道可以使用css属性word-break: break-all; 来实现单词的自动换行。

但是我想在单词的某个位置插入软换行符，所以css属性word-break对我来说不能完全满足需求。

- WHITECOLOR

---

CSS word-wrap: break-word;当单词超出限制宽度时，Internet Explorer会在字符位置处断开单词。wbr不能用于断开单词。它用于nobr块内部以断开句子但不是单词。 - user3299259

正如他们经常说的那样 - “不要害羞”。 - CBroe

Answer 1

将以下内容添加到您的样式表中：

wbr:after { content: "\00200B"; }

这会插入U+200B零宽度空格，它是好旧的<wbr>的字符级对应物，但通常会被浏览器破坏（一个悲惨的故事）。

或者，您可以用该字符替换<wbr>标签，您可以在HTML中将其写为​。

- Jukka K. Korpela

---

在可能的断词处添加了 ​。在我的情况下是在下划线 (_) 后面。在 IE11 和 Chrome 42 中完美运行。 - phse

wbr:after 在 IE11 中似乎无法正常工作，因为我认为 <wbr> 会被视为一个空标签。根据这篇帖子：https://dev59.com/dWw05IYBdhLWcg3w6GAw#24702765 大多数浏览器不支持对空标签使用 :after。 - jessewolfe

如果您插入\u200b字符，它也适用于截断的工具提示。 - user9645

Answer 2

Jukka的答案很好。然而，在下面的情况中，允许用户复制电子邮件地址是可取的。在这种情况下，​字符不能潜入字符串。因此，必须使用多个内联元素（例如或）和display:inline-block;来解决它。

在这种情况下，标签包围以.结尾或以@开头的电子邮件地址组件。

.wbr-i-container i {
  display: inline-block;
  font-style: inherit;
}

<a class="wbr-i-container"
><i>FirstName.</i
><i>MiddleName.</i
><i>LastName</i
><i>@company.</i
><i>com</i
></a>

<i> 用于简洁易读，而 <span> 则更符合语义。

在当前版本的 Chrome、Firefox、IE 和 Safari 中均可使用。

- bjornte