7

我正在尝试使用CSS Hyphens。它们在 IE 11 和 Safari 中工作，但在 Firefox 中不能正常工作，我不确定为什么。这是一个例子：

.container{
    width: 16.6667%;
    background:#ccc;
}
h3{
    font-size: 0.95rem;
    font-weight: 600;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
<div class="container">
<h3>DIAGNOSEVERFAHREN</h3>
</div>

当您在 Firefox 中运行代码段时，该单词DIAGNOSEVERFAHREN会溢出容器并且不会中断。在 Safari 和 IE 中，它会像我预期的那样中断。为什么这在 Firefox 中不起作用？

编辑

正如 Marat Tanalin 的回答所指出的，必须包含 lang 属性才能使连字符正常工作。我有这个作为我的<html>标签：

<html class="no-js" lang="de">
4

4 回答 4

12

确保元素或其某些父元素具有适当的lang属性。CSS连字符的工作至关重要。

一般来说，至少HTML元素应该具有以下属性：

<html lang="en">

对于大写字符，使用 CSS 而不是 HTML 中硬编码的大写文本：

.example {text-transform: uppercase; }

由于在 Firefox 38 中修复了错误 1105644 ，因此大写的德语文本在 Firefox 37 和更早版本中不会连字符。

于 2015-03-11T00:37:18.860 回答
11

出于某种奇怪的原因，这似乎是因为这个词是大写的。我认为它与 Firefox 有关，它在搜索连字符字典时不认为它是一个词。

我找不到任何关于它的错误报告，但@MaratTanalin 认为它已在 Firefox v38 中修复。

p {
    width: 55px;
    border: 1px solid black;
    -moz-hyphens: auto;
    hyphens: auto;
}
<div>
    <h4>English</h4>
    <p lang="en" class="auto">DIAGNOSEVERFAHREN</p>
    <p lang="en" class="auto">Diagnoseverfahren</p>
    <p lang="en" class="auto">diagnoseverfahren</p>
</div>
<div>
    <h4>German</h4>
    <p lang="de" class="auto">DIAGNOSEVERFAHREN</p>
    <p lang="de" class="auto">Diagnoseverfahren</p>
</div>

编辑：它影响所有大写和大写的单词。显然这是 Firefox 设计的，不会很快修复。只有德语支持大写（不是大写）单词的断字功能。 https://bugzilla.mozilla.org/show_bug.cgi?id=656879

于 2015-03-11T00:57:52.043 回答
1

我在 ios safari 上遇到了此类问题，该页面上有多个连字符，其中一些在剩余工作时不起作用。但我不应该使用文本转换：大写，所以将字体大小增加到 1px，它对我有用。

于 2016-09-08T13:22:14.177 回答
0

为了演示连字符的概念，您需要在父元素上将 lang 属性设置为 en。

于 2018-05-30T10:31:29.160 回答