2

我发现这篇关于悬挂标点符号的文章： 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/

有什么办法吗？

4

1 回答 1

1

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

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

在 HTML 中设置 SOFT HYPHEN 字符的样式是一个不同的问题，其答案取决于浏览器。答案不取决于输入 SOFT HYPHEN 的方法（作为原始字符与&shy;引用与数字引用），因为它们在 DOM 中产生相同的数据：但这取决于将字符包装在元素中，就像问题一样。

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

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

于 2014-06-21T07:52:22.043 回答