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

Ссылка скопирована
1 ответ

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

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

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

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

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

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

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

Рис. 2 YB и у всех остальных браузерах так же, <html lang="ru">

Дополнительно:

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

Ото&amp;shy;ри&amp;shy;но&amp;shy;ла&amp;shy;рин&amp;shy;го&amp;shy;ло&amp;shy;гия

Ото&amp;shy;ри&amp;shy;но&amp;shy;ла&amp;shy;рин&amp;shy;го&amp;shy;ло&amp;shy;гия

Или

Ото&amp;#173;ри&amp;#173;но&amp;#173;ла&amp;#173;рин&amp;#173;го&amp;#173;ло&amp;#173;гия

Ото&amp;#173;ри&amp;#173;но&amp;#173;ла&amp;#173;рин&amp;#173;го&amp;#173;ло&amp;#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

    нельзя фиксированно указать где будет перенос

    ото&amp;shy;ри&amp;shy;но&amp;shy;ла&amp;shy;рин&amp;shy;го&amp;shy;ло&amp;shy;гия

    ото&amp;shy;ри&amp;shy;но&amp;shy;ла&amp;shy;рин&amp;shy;го&amp;shy;ло&amp;shy;гия

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

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

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

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

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

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

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

    • Svojest, а если заменить на какое-нибудь более распространённое слово? Т.е. выяснить, есть ли слово в словаре или проблема со свойством.
    • Ankhena, в словарях не слова, там слоги, насколько мне известно.
    • Сергей delphinpro, не знала этого, тогда хорошо

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

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

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

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

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

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

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

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

    • Svojest,

      А почему в итоге может не работать?

      Полагаю потому что браузерный словарь не так уж и богат:

      Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка.

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Ирина WP Ответ

    Проблема с неработающими дефисами (hyphens) может быть вызвана несколькими причинами. Вот несколько возможных способов решения этой проблемы:

    1. Проверьте CSS: Убедитесь, что у элемента, к которому вы применяете стиль hyphens, правильно заданы свойства CSS. Например, убедитесь, что у элемента есть свойство `hyphens: auto;` или `hyphens: manual;`.

    ```html

    p {
      hyphens: auto;
    }

    p { hyphens: auto; }

    ```

    2. Проверьте поддержку браузером: Некоторые браузеры могут не поддерживать свойство `hyphens`, поэтому убедитесь, что вы используете совместимый браузер или найдите альтернативный способ для поддержки всех браузеров.

    3. Проверьте текстовое содержимое: Иногда текст может быть написан таким образом, что дефисы не могут быть разделены. Попробуйте изменить текст или добавить дополнительные дефисы для проверки.

    4. Используйте JavaScript: Если все остальные способы не помогли, вы можете использовать JavaScript для явного разделения слов с дефисами.

    ```html

    document.querySelector('p').innerHTML = document.querySelector('p').innerHTML.replace(/-/g, '-');

    document.querySelector('p').innerHTML = document.querySelector('p').innerHTML.replace(/-/g, '-');

    ```

    Попробуйте применить вышеперечисленные способы для решения проблемы с неработающими дефисами (hyphens) и убедитесь, что ваш текст отображается корректно.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно