Question

软中断似乎不适用于IE。有没有其他选择或如何使其有效？

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

body {
font-size: 272px;    
}


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

我希望“单词”在不适合窗口宽度时可以破解。这项工作包含在webkit和mozila中，但不在IE（10/11）中。

我知道，对于破碎的单词，我可以使用css word-break：break-all;

但是我希望能够在单词的某个位置放置软休息，因此css word-break对我来说无效。

Answer 1

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

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

这会插入U + 200B ZERO WIDTH SPACE，这是浏览器在很大程度上被破坏的好的字符级对应物（sad story）。

或者，您可以使用该字符替换标记，您可以将其作为用HTML编写。

Answer 2

Jukka＆＃39; answer是一个很好的人。然而，在下面的情况中，希望允许用户复制文本，该文本是电子邮件地址。在这种情况下，字符无法潜入字符串。因此，必须使用多个内联元素（例如或）与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>

用于简洁＆amp;可读性，而在语义上是正确的。

适用于当前版本的Chrome，Firefox，IE和Safari。

wbr标签在IE中不起作用

2 个答案: