Автоматический перенос слов по слогам на сайте
Опубликовано: 06 Апреля 2023
Иногда возникают моменты, когда без переноса слов на сайте ну совсем никак не обойтись. Как же можно научить сайт подстраиваться под нужный размер монитора с использованием правил переноса слов?
Самый простой способ, подходящий для небольших текстовых блоков — вставка специального символа мягкого переноса:
// Мнемоника
­
// HTML-код
­
// Unicode
u+00ad
Этот символ не виден в обычном тексте, но при появлении необходимости переносит слово на другую строку, при этом добавляя дефис.
Такой символ, легко вставлять вручную, в небольшие текстовые блоки, но если нужно разбивать на слоги большие блоки текста, то можно использовать специальное css свойство hyphens. Оно указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Можно полностью запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы там, где это необходимо. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Свойство hyphens</title>
<style>
.test {
hyphens: auto;
}
</style>
</head>
<body>
<p class="test">Предпочтение нулевого риска — предпочтение контролируемой, но потенциально более вредоносной (вследствие более частого её возникновения) ситуации перед обратной по причине переоценки возможности контроля. То есть человек со своей стороны считает, что он полностью избавляется от риска (на самом деле не имея полного контроля), в то время как со стороны статистики это является снижением лишь одного, не самого большого риска до нуля. Например, большинство людей предпочли бы уменьшить вероятность террористических актов до нуля вместо снижения аварийности на дорогах, даже если бы второй эффект давал больше сохранённых жизней[5]. Другой распространённый пример — ятрофобия: многие люди боятся осложнений медицинских вмешательств больше, чем заболеваний и смерти в результате этих заболеваний, возникающих из-за отсутствия лечения (например антивакцинаторство).</p>
</body>
</html>
Демонстрация переносов с использованием hyphens:
Предпочтение нулевого риска — предпочтение контролируемой, но потенциально более вредоносной (вследствие более частого её возникновения) ситуации перед обратной по причине переоценки возможности контроля. То есть человек со своей стороны считает, что он полностью избавляется от риска (на самом деле не имея полного контроля), в то время как со стороны статистики это является снижением лишь одного, не самого большого риска до нуля. Например, большинство людей предпочли бы уменьшить вероятность террористических актов до нуля вместо снижения аварийности на дорогах, даже если бы второй эффект давал больше сохранённых жизней. Другой распространённый пример — ятрофобия: многие люди боятся осложнений медицинских вмешательств больше, чем заболеваний и смерти в результате этих заболеваний, возникающих из-за отсутствия лечения (например антивакцинаторство). (с) wikipedia