如何修复/控制 CSS 连字符



我已经在网站上设置了hyphens: auto;,并在HTML标签上设置了lang=da-DK。文本(在整个网站上(是丹麦语。 它在其他地方都像它应该的那样工作,除了一个单词被巧妙地拆分。

我希望能有一些东西可以放在头或页脚上,所以我不需要"记住每次使用时都以特殊的方式写这个词"。

我可以以某种方式制作一个例外列表,或者告诉浏览器如果它搞砸了单词,如何和/或在哪里拆分单词?如果没有,我可以使用 JavaScript 解决这个问题吗?

这是有问题的单词,错误和正确拆分(在Chrome中(:https://codepen.io/zethzeth/pen/PoZZmqP

不對

Rå-
dgive

正确

råd-
give

补充 1 - 浏览器不一致

我现在可以看到,它实际上在不同的浏览器中有不同的行为。

-----------------------------------------------------------------------
Browser   |   How it splits 'Rådgive'   |   How it splits 'rådgive'   |
-----------------------------------------------------------------------
Chrome    |   Rå-dgive                  |   råd-give                  |
Firefox   |   Rådgive   (not splitting) |   råd-give                  |
Safari    |   Rå-dgi-ve      (way off!) |   råd-give                  |
-----------------------------------------------------------------------

所以我们有 3 次 attmpts,- 和 3 次失误。我的意思是。。。为什么那个首字母"R"把这件事搞得这么糟糕?

我认为您应该只尝试使用此标签lang="en"

<article lang="en">
<p>Rådgive rådgive ...</p>
</article>

我不知道这是否证明了这种努力,但您可以添加控制中断的字符:

Råd&shy;give rå&zwnj;d&shy;give ...

&shy;添加,&zwnj;删除休息机会。

另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Suggesting_line_break_opportunities

最新更新