在CMS中添加软连字符：让它在Chrome中运行 [英] Add soft hyphens in a CMS: getting it to work in Chrome

问题描述

& shy; 非常棒，尤其是因为它适用于所有流行的浏览器。你把它放在一个单词的中间，告诉浏览器在那个地方可能会打破这个词。如果它在那里被破坏，会出现连字符。如果没有，字符仍然是不可见的。

但是对于内容作者来说并不是很容易使用：你必须进入HTML来添加它。即使您可以将其添加到CMS中，只要您插入它，就看不到它在哪里。

所以我继续在我的CMS中为我的作者声明一个内联样式。他们可以选择一个单词的一部分，例如< span class =shy> communi< / span>阳离子，然后css规则会奇迹般地添加& shy; 使用：在伪元素之后！而对于一些CMS特定的CSS，我可以给这个标签一个虚线的下划线，以表明它有一个这样的软连字符。适用于Firefox和IE8 +。整齐。

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

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

如何解决这个问题？

解决方案

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

& shy; 似乎只能在Chrome中使用另一个字符（和之前）。上面的问题是& shy; 字符总是标签内的最后一个字符。所以我增加了一个空间，然后用css关闭了这个空间。不幸的是，这不适用于一个CSS的伪元素，所以我仍然需要JavaScript。

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

 <$ c $（$。）$ this.innerHTML + ='& shy;'; //添加软连字符（对于所有浏览器）
 
 //只有Chrome才有问题
 if（/ chrom（e | ium）/。test（navigator.userAgent.toLowerCase（）））{
 this.innerHTML + =''; //添加一个空间
 $（this）.css（'margin-right'，'-.26em'）; //关闭与空间的差距
} 
}）; 
  

用法如下：

 < span class =shy> communi< / span>阳离子
  

­ is awesome, especially because it works in all popular browsers. You put it in the middle of a word, which tells the browser that the word may be broken in that place. If it does get broken there, a hyphen appears. If it doesn't, the character remains invisible.

But it's not very easy to use for content authors: you have to go into the HTML to add it. Even if you can add it in a CMS, you can't see where it is as soon as you inserted it.

So I went ahead and declared an inline style in my CMS for my authors to use. They can select part of a word, for example <span class="shy">communi</span>cation, and then a css rule will magically add the ­ using an :after pseudo-element! And with some CMS-specific CSS I can give that tag a dotted underline to show that it's got one of those soft hyphens. Works in Firefox and IE8+. Neat.

But the hyphen doesn't appear in Google Chrome! It breaks the word, but there's no dash. I knew it didn't support the hyphens css property, but it does normally support ­.

But all right, so I removed the css style and wrote some javascript to add ­ upon load. Using jQuery, I tried both .append and .after. I even tried innerHTML += '­'. None of them work! How disappointing...

How to work around this?

解决方案

I figured out a solution while writing this question.

­ seems to work in Chrome only if there is another character right after it (and before it). The issue above is that the ­ character is always the last one within the tag. So I added a space and then closed that space with css. Unfortunately this does not work with a css pseudo element, so I still needed javascript.

I did need to use browser detection because adding the space made it stop working in Internet Explorer and Firefox. (using   makes it work in Firefox, but not 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
    }
});

To be used like this:

<span class="shy">communi</span>cation

这篇关于在CMS中添加软连字符：让它在Chrome中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！