Почему не работает 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 февр.
637 просмотров

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

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 12 часов назад
- 43 просмотра
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- 19 часов назад
- 51 просмотр
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 67 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 91 просмотр
0

ответов
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 102 просмотра
1

ответ
CSS

Простой
Как лучше отобразить создаваемый нажатием div в grid контейнере?
- 1 подписчик
- 17 дек.
- 56 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- 17 дек.
- 170 просмотров
1

ответ
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- 17 дек.
- 262 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- 16 дек.
- 113 просмотров
1

ответ
CSS

Простой
Как заменить псевдокласс has?
- 1 подписчик
- 16 дек.
- 89 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

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

22 дек. 2024, в 11:58

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

Игра С# MVC console + wpf

22 дек. 2024, в 10:44

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

Извлечь данные из архива

22 дек. 2024, в 10:12

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

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

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

Или

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

А почему в итоге не работает? Ведь указаны верные префиксы под все браузеры, и значение 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?

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

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

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