Question

非常棒，特别是因为它适用于所有流行的浏览器。你把它放在一个单词的中间，告诉浏览器可能在该地方被打破。如果它确实在那里被破坏，则会出现连字符。如果没有，则角色仍然不可见。

但是对内容作者来说使用起来并不容易：你必须进入HTML才能添加它。即使您可以将其添加到CMS中，但只要插入它就无法看到它的位置。

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

但连字符未出现在Google Chrome中！它打破了这个词，但没有冲刺。我知道它不支持hyphens css属性，但它通常支持。

但是好吧，所以我删除了css样式并编写了一些javascript来加载。使用jQuery，我尝试了.append和.after。我甚至试过innerHTML += ''。他们都没有工作！多么令人失望......

如何解决这个问题？

Answer 1

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

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

我确实需要使用浏览器检测，因为添加空间使其停止在Internet Explorer和Firefox中工作。（使用 使其在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

在CMS中添加软连字符：让它在Chrome中运行

1 个答案: