Задать вопрос
@Svojest
css

Почему не работает hyphens?

Проблема:
Свойство hyphens работает только в Google Chrome, в остальных браузерах не работает (пробовал Safari, Firefox, Opera, YB, Edge)

Заметил, что для hyphens важно значение атрибута <html lang="ru">, и если в моём случае сменить на en, то с кириллицой перестанет работать это свойство и в Google Chrome

Так же, не удалось найти поддержку "ru" на caniuse, хоть и показывает global 98%

Может есть варианты, чтобы повторить такое поведение?
Важно чтобы перенос происходил автоматически, нельзя фиксированно указать где будет перенос, т.к если у карточки будет достаточно места, то перенос не нужен
Или всё же я что-то неверно использую?

65deb21031930512088103.jpeg

Рис. 1 Google Chrome , <html lang="ru">

65deb21ae97d3143164688.jpeg

Рис. 2 YB и у всех остальных браузерах так же, <html lang="ru">
  • Вопрос задан
  • 214 просмотров
2 комментария
Подписаться 2 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Есть такие варианты

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;гия
Ответ написан
8 комментариев
8 комментариев
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Заметил, что для hyphens важно значение атрибута

Можно же не гадать на кофейной гуще, а просто прочитать доку https://htmlbook.ru/css/hyphens

Если не работает автоматически и текста не много, то можно расставить варианты переноса в ручную
manual - Переносы слов в тексте происходят в тех местах, 
где добавлен &shy; или <wbr>, если их нет, то переносы не делаются.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы