Почему не работает hyphens?
Проблема:
Свойство hyphens работает только в Google Chrome, в остальных браузерах не работает (пробовал Safari, Firefox, Opera, YB, Edge)
Заметил, что для hyphens важно значение атрибута <html lang="ru">, и если в моём случае сменить на en, то с кириллицой перестанет работать это свойство и в Google Chrome
Так же, не удалось найти поддержку "ru" на caniuse, хоть и показывает global 98%
Может есть варианты, чтобы повторить такое поведение?
Важно чтобы перенос происходил автоматически, нельзя фиксированно указать где будет перенос, т.к если у карточки будет достаточно места, то перенос не нужен
Или всё же я что-то неверно использую?
Рис. 1 Google Chrome , <html lang="ru">
Рис. 2 YB и у всех остальных браузерах так же, <html lang="ru">
Дополнительно:
Ну что не работает это понятно.
А вот добавить символ переноса вы можете самостоятельно.
Например
Ото&shy;ри&shy;но&shy;ла&shy;рин&shy;го&shy;ло&shy;гия |
Ото&shy;ри&shy;но&shy;ла&shy;рин&shy;го&shy;ло&shy;гия
Или
Ото&#173;ри&#173;но&#173;ла&#173;рин&#173;го&#173;ло&#173;гия |
Ото&#173;ри&#173;но&#173;ла&#173;рин&#173;го&#173;ло&#173;гия
А почему в итоге не работает? Ведь указаны верные префиксы под все браузеры, и значение lang="ru"
Я думаю ввёл заблуждение, указав "что нельзя фиксированно указать перенос", стоило указать, что мне нельзя, т.к названия поступают с бэка, и я не имею доступа к названиям, попробую узнать, может со стороны бэка выйдет решить проблему
Ответы:
Есть такие варианты
1. Предварительная подготовка текста.
1.1. Либо вручную с помощью подобных сервисов https://betravis.github.io/shape-tools/hyphenator/
1.2. Либо php-скриптом при сохранении/или выводе на страницу, вроде такого https://github.com/heiglandreas/Org_Heigl_Hyphenator
2. Использовать javascript-библиотеку для расстановки переносов, типа такой https://github.com/mnater/Hyphenopoly
нельзя фиксированно указать где будет перенос
ото&shy;ри&shy;но&shy;ла&shy;рин&shy;го&shy;ло&shy;гия |
ото&shy;ри&shy;но&shy;ла&shy;рин&shy;го&shy;ло&shy;гия
- Спасибо за ответ!
А почему в итоге может не работать? Ведь указаны верные префиксы под все браузеры, и значение lang="ru"
Я думаю ввёл заблуждение, указав "что нельзя фиксированно указать перенос", стоило указать, что мне нельзя, т.к названия поступают с бэка, и я не имею доступа к названиям, попробую узнать, может со стороны бэка выйдет решить проблему
- Svojest, не знаю. Я бы предположил, что отсутствуют словари переносов для русского языка. Но на MDN наличие этих словарей обозначено для всех браузеров.
- Svojest, а пробовали добавить атрибут lang="ru" для конкретного тега с длинным текстом (не только для всего документа)?
- Сергей delphinpro, да, отображается так же без переноса
- Svojest, а если заменить на какое-нибудь более распространённое слово? Т.е. выяснить, есть ли слово в словаре или проблема со свойством.
- Ankhena, в словарях не слова, там слоги, насколько мне известно.
- Сергей delphinpro, не знала этого, тогда хорошо
Заметил, что для hyphens важно значение атрибута
Можно же не гадать на кофейной гуще, а просто прочитать доку https://htmlbook.ru/css/hyphens
Если не работает автоматически и текста не много, то можно расставить варианты переноса в ручную
manual - Переносы слов в тексте происходят в тех местах, где добавлен &shy; или <wbr>, если их нет, то переносы не делаются. |
manual - Переносы слов в тексте происходят в тех местах, где добавлен &shy; или <wbr>, если их нет, то переносы не делаются.
- Спасибо за ответ!
А почему в итоге может не работать? Ведь указаны верные префиксы под все браузеры, и значение lang="ru"
Я думаю ввёл заблуждение, указав "что нельзя фиксированно указать перенос", стоило указать, что мне нельзя, т.к названия поступают с бэка, и я не имею доступа к названиям, попробую узнать, может со стороны бэка выйдет решить проблему
- Svojest,
А почему в итоге может не работать?
Полагаю потому что браузерный словарь не так уж и богат:
Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос




Проблема с неработающими дефисами (hyphens) может быть вызвана несколькими причинами. Вот несколько возможных способов решения этой проблемы:
1. Проверьте CSS: Убедитесь, что у элемента, к которому вы применяете стиль hyphens, правильно заданы свойства CSS. Например, убедитесь, что у элемента есть свойство `hyphens: auto;` или `hyphens: manual;`.
```html
p { hyphens: auto; }
```
2. Проверьте поддержку браузером: Некоторые браузеры могут не поддерживать свойство `hyphens`, поэтому убедитесь, что вы используете совместимый браузер или найдите альтернативный способ для поддержки всех браузеров.
3. Проверьте текстовое содержимое: Иногда текст может быть написан таким образом, что дефисы не могут быть разделены. Попробуйте изменить текст или добавить дополнительные дефисы для проверки.
4. Используйте JavaScript: Если все остальные способы не помогли, вы можете использовать JavaScript для явного разделения слов с дефисами.
```html
document.querySelector('p').innerHTML = document.querySelector('p').innerHTML.replace(/-/g, '-');
```
Попробуйте применить вышеперечисленные способы для решения проблемы с неработающими дефисами (hyphens) и убедитесь, что ваш текст отображается корректно.