CSS Hyphens не работает в Firefox?

Я пытаюсь использовать CSS Hyphens. Они работают в IE 11 и Safari, но не работают в Firefox правильно, и я не уверен, почему. Вот пример:CSS Hyphens не работает в 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?

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

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

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

источник

2015-03-11 L84

По какой-то странной причине это похоже на то, что слово написано заглавными буквами. Смотрите: http://jsfiddle.net/nufn4eej/ – joshhunt

@joshhunt - Ваше право! Интересно. Интересно, это ошибка? Пожалуйста, отправьте ответ, чтобы я согласился. – L84

По какой-то странной причине это похоже на то, что слово написано заглавными буквами. Я предполагаю, что это имеет какое-то отношение к 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>

источник

2015-03-11 00:57:52 joshhunt

В качестве примечания для других, кто видит это, вы можете использовать CSS для преобразования текста в верхний регистр ('text-transform: uppercase;'), и он работает без проблем. – L84

не работает в Chrome 43 –

@HannesSchneidermayer Chrome никогда не работал с переносом – porglezomp

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

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

<html lang="en">

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

.example {text-transform: uppercase; }

верхнего регистр немецкого текста не переносится в Firefox 37 и старше из-за bug 1105644, зафиксированного в Firefox 38.

источник

2015-03-11 00:37:18

Он делает. Я отредактирую свой вопрос, чтобы отразить это. – L84

@Lynda Ваш пример работает для меня в Firefox 38a2 (Developer Edition) независимо от случая с символом. Но не работает для прописных букв в Fx 37. Так что это, вероятно, ошибка, исправленная в Firefox 38+. –

Полезно знать. Зная случай, проблема в том, что это простое исправление, просто добавьте CSS: 'text-transform: uppercase;' и он работает в Firefox, как и предполагалось. – L84

Я получил этот тип вопроса КСН сафари, есть несколько дефисов на этой странице, мало кто из тех, кто не работает, а остальные работы. но я не должен использовать текстовое преобразование: в верхнем регистре, поэтому увеличился размер шрифта до 1px, и это сработало для меня.

источник

2016-09-08 13:22:14

ответ

Смежные вопросы