在 CMS 中添加软连字符:让它在 Chrome 中工作

Question

­很棒，特别是因为它适用于所有流行的浏览器。你把它放在一个单词的中间，它告诉浏览器这个词可能在那个地方被破坏了。如果它确实在那里损坏，则会出现一个连字符。否则，该字符将保持不可见。

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

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

但是连字符不会出现在谷歌浏览器中！它打破了这个词，但没有破折号。我知道它不支持 hyphens css 属性，但它通常支持 ­ .

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

如何解决这个问题？

Answer 1

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

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

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

$(".shy").each(function(){
    this.innerHTML += '­ '; // 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