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

Question

Svojest @Svojest

Почему не работает 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">

Вопрос задан 28 февр.
581 просмотр

2 комментария

Подписаться 2 Простой 2 комментария

ProjectSoft @ProjectSoft
Ну что не работает это понятно.
А вот добавить символ переноса вы можете самостоятельно.
Например

Оториноларингология

Или

Оториноларингология
Написано 28 февр.
Svojest @Svojest Автор вопроса

Спасибо за ответ!

А почему в итоге не работает? Ведь указаны верные префиксы под все браузеры, и значение lang="ru"

Я думаю ввёл заблуждение, указав "что нельзя фиксированно указать перенос", стоило указать, что мне нельзя, т.к названия поступают с бэка, и я не имею доступа к названиям, попробую узнать, может со стороны бэка выйдет решить проблему

Написано 28 февр.

Решения вопроса 1

8 комментариев

Svojest @Svojest Автор вопроса

Спасибо за ответ!

А почему в итоге может не работать? Ведь указаны верные префиксы под все браузеры, и значение lang="ru"

Я думаю ввёл заблуждение, указав "что нельзя фиксированно указать перенос", стоило указать, что мне нельзя, т.к названия поступают с бэка, и я не имею доступа к названиям, попробую узнать, может со стороны бэка выйдет решить проблему

Написано 28 февр.
Сергей delphinpro @delphinpro Куратор тега CSS

Svojest, не знаю. Я бы предположил, что отсутствуют словари переносов для русского языка. Но на MDN наличие этих словарей обозначено для всех браузеров.

Написано 28 февр.
Сергей delphinpro @delphinpro Куратор тега CSS

Svojest, а пробовали добавить атрибут lang="ru" для конкретного тега с длинным текстом (не только для всего документа)?

Написано 28 февр.
Svojest @Svojest Автор вопроса

Сергей delphinpro, да, отображается так же без переноса

Написано 28 февр.
Ankhena @Ankhena Куратор тега CSS

Svojest, а если заменить на какое-нибудь более распространённое слово? Т.е. выяснить, есть ли слово в словаре или проблема со свойством.

Написано 28 февр.
Сергей delphinpro @delphinpro Куратор тега CSS

Ankhena, в словарях не слова, там слоги, насколько мне известно.

Написано 28 февр.
Ankhena @Ankhena Куратор тега CSS

Сергей delphinpro, не знала этого, тогда хорошо

Написано 28 февр.
Dmitry @dmitryfx
Оставлю для потомков)

Качаем библиотеку Hyphenopoly.

Отключаем все hyphens и word-break в css.

Подключаем:

<script type="text/javascript" src="./Hyphenopoly-5.3.0/Hyphenopoly_Loader.js"></script>

Запускаем:

document.addEventListener( 'DOMContentLoaded', () =>{ Hyphenopoly.config({ require: { "ru": "FORCEHYPHENOPOLY" }, setup: { selectors: { 'td': { hyphen: "\u00AD", leftmin: 2, rightmin: 2 } } } }); });

Библиотека расставляет  по словам, дальше браузер сам сообразит, что ему с этим делать.
Написано 10 апр.

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Ваш ответ на вопрос

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

Похожие вопросы

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 3 часа назад
- 19 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 9 часов назад
- 38 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 94 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 100 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 109 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать метку/ярлык?
- 1 подписчик
- 18 нояб.
- 42 просмотра
0

ответов
CSS

Простой
Как сверстать данный блок?
- 1 подписчик
- 18 нояб.
- 88 просмотров
3

ответа
CSS

Простой
Можно ли уже использовать CSS-свойство text-wrap: balance?
- 1 подписчик
- 17 нояб.
- 117 просмотров
2

ответа
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать Custom Speech-to-text Operator на Apache Flink

21 нояб. 2024, в 21:42

100000 руб./за проект

Сделать видио поздравления с субтитрами

21 нояб. 2024, в 21:30

500 руб./за проект

Разработка мобильного приложения с дополненной реальностью (AR)

21 нояб. 2024, в 20:14

200000 руб./за проект

Ну что не работает это понятно.
А вот добавить символ переноса вы можете самостоятельно.
Например

Оториноларингология

Или

Оториноларингология
Спасибо за ответ!

А почему в итоге не работает? Ведь указаны верные префиксы под все браузеры, и значение lang="ru"

Я думаю ввёл заблуждение, указав "что нельзя фиксированно указать перенос", стоило указать, что мне нельзя, т.к названия поступают с бэка, и я не имею доступа к названиям, попробую узнать, может со стороны бэка выйдет решить проблему

Answer 1 · 2024-02-28 10:45:12

Есть такие варианты

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;гия

Answer 2 · 2024-02-28 10:52:58

Заметил, что для hyphens важно значение атрибута

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

Если не работает автоматически и текста не много, то можно расставить варианты переноса в ручную

manual - Переносы слов в тексте происходят в тех местах, 
где добавлен &shy; или <wbr>, если их нет, то переносы не делаются.

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

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

Минуточку внимания

Войдите на сайт