css - 悬挂软连字符

Question

我找到了这篇关于悬挂标点符号的文章: http://webdesign.tutsplus.com/articles/getting-the-hang-of-hanging-punctuation--cms-19890 以及评论中的这个链接:http://dabblet.com/gist/9623025

这是一个非常好的主意，它会是挂起由 Hyphenator 等工具生成的软连字符的绝妙方法。或 Hypher .我开始玩弄 Hypher 并将连字符封装在一个跨度中......

然后我意识到我不知道如何设置软连字符的样式。

此代码应使连字符变为红色，但当然 span 中的连字符不会打断单词，因此浏览器不会显示它:

<style>
    .box{
        width:40px;
        background-color:yellow;
    }
    .hyphen{
        color:red;
    }
</style>

<div class="box">
    <p>aaaa&shy;bbbb<span class="hyphen">&shy;</span>cccc</p>
</div>

http://jsfiddle.net/5LazU/

有什么办法吗？

Answer 1

这个问题是关于什么的有点不清楚，所以我将解决对它的不同解释。

浏览器自动连字符引入的连字符(由于使用了 hyphens 属性)不能作为单独的实体设置样式(即，以不同于周围文本样式的方式) , 因为它们不构成元素或伪元素。

在 HTML 中设置 SOFT HYPHEN 字符的样式是一个不同的问题，其答案取决于浏览器。答案不取决于输入 SOFT HYPHEN 的方法(作为原始字符与 ­ 引用与数字引用)，因为它们在 DOM 中产生相同的数据:但它取决于将字符包装在一个元素中，如问题所示。

问题中的代码导致在 Firefox 和 IE 上显示红色连字符，但在 Chrome 上，“bbbb”后没有连字符，所以我猜代码是在 Chrome 上测试的。这似乎是一个错误:该元素被视为允许直接换行而不插入连字符。

“挂标点”的问题则完全不同。悬挂标点符号技术的原因是引号(这是链接文档包含的内容)是因为标记出现在一段文本的开头和结尾。浏览器插入的连字符是不同的，关键是浏览器在插入连字符之前会分析一行中可以容纳多少个字符(由于自动连字符或将 SOFT HYPHEN 呈现为可见连字符的结果)。除非浏览器为此目的提供 API，否则我看不出有什么方法可以拦截它。