Question

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

这是一个非常好的主意，它是一种很棒的方法来挂起由Hyphenator或Hypher等工具生成的软连字符。我开始玩Hypher并在一个范围内封装连字符......

然后我意识到我不知道如何设计柔和的连字符。

此代码应该使连字符变为红色，但当然跨度中的连字符不会破坏一个单词，因此浏览器不会显示它：

<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中的HYPHEN字符是一个不同的问题，具有依赖于浏览器的答案。答案不依赖于输入SOFT HYPHEN的方法（作为原始字符与引用相对于数字引用），因为它们在DOM中产生相同的数据：但它取决于包装元素中的字符，如问题中所示。

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

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

挂软连字符

1 个答案: