CSS-дефисы не работают в Firefox?

Я пытаюсь использовать CSS дефисы. Они работают в 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?

редактировать

Как отмечается в ответе Марата Таналина, для правильной работы дефисов необходимо указать атрибут lang. У меня это как мой <html> тег:

<html class="no-js" lang="de">
Источник

4 ответа

Решение

По какой-то странной причине, кажется, потому что слово написано заглавными буквами. Я предполагаю, что это как-то связано с тем, что Firefox не думает, что это слово, когда ищет словарь переносов.

Я не смог найти никаких сообщений об ошибках, но @MaratTanalin считает, что это было исправлено в Firefox v38.

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

Источник

Убедитесь, что элемент или некоторые из его родителей имеют соответствующие lang приписывать. Очень важно, чтобы дефис CSS работал.

В общем, по крайней мере, HTML элемент должен иметь атрибут:

<html lang="en">

Для заглавных символов используйте CSS вместо прописного текста в HTML:

.example {text-transform: uppercase; }

Немецкий текст в верхнем регистре не переносится через Firefox 37 и старше из-за ошибки 1105644, исправленной в Firefox 38.

Источник

Я получил этот тип проблемы на ios safari, на этой странице есть несколько дефисов, но некоторые из них не работали, пока оставались работы. но я не должен использовать text-transform:uppercase, поэтому увеличил размер шрифта до 1px, и это сработало для меня.

Источник

Чтобы продемонстрировать концепцию переноса слов, вам нужно задать для атрибута lang значение en на родительском элементе.

Источник
Другие вопросы по тегам