0

­很棒，尤其是因为它适用于所有流行的浏览器。你把它放在一个词的中间，它告诉浏览器这个词可能在那个地方被打断了。如果它确实在那里被破坏，则会出现一个连字符。如果没有，该角色将保持隐形。

但是对于内容作者来说，使用它并不是很容易：您必须进入 HTML 来添加它。即使您可以将其添加到 CMS 中，您也无法在插入后立即看到它的位置。

所以我继续在我的 CMS 中声明了一个内联样式供我的作者使用。他们可以选择单词的一部分，例如<span class="shy">communi</span>cation，然后 css 规则会神奇地添加&shy;using:after伪元素！并且使用一些特定于 CMS 的 CSS，我可以给该标签一个虚线下划线，以表明它有一个软连字符。适用于 Firefox 和 IE8+。整洁的。

但连字符不会出现在 Google Chrome 中！它打破了这个词，但没有破折号。我知道它不支持hyphenscss 属性，但它通常支持&shy;.

但是好吧，所以我删除了 css 样式并编写了一些 javascript 以在加载时添加。使用 jQuery，我尝试了.append和.after. 我什至试过innerHTML += '&shy;'。它们都不起作用！多么令人失望……

如何解决这个问题？

4

1 回答 1

0

我在写这个问题时想出了一个解决方案。

&shy;似乎只有在它之后（和之前）有另一个字符时才在 Chrome 中工作。上面的问题是该&shy;字符始终是标签中的最后一个。所以我添加了一个空间，然后用 css 关闭了那个空间。不幸的是，这不适用于 css 伪元素，所以我仍然需要 javascript。

我确实需要使用浏览器检测，因为添加空间使其在 Internet Explorer 和 Firefox 中停止工作。（使用&nbsp;使它可以在 Firefox 中工作，但不能在 IE 中工作）

$(".shy").each(function(){
    this.innerHTML += '&shy; '; // add the soft hyphen (for all browsers)

    // Only Chrome has an issue
    if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        this.innerHTML += ' '; // add a space
        $(this).css('margin-right', '-.26em'); // close the gap from the space
    }
});

像这样使用：

<span class="shy">communi</span>cation
于 2015-01-16T03:16:02.613 回答