From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/hyphens/index.html | 153 ++++++++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/ru/web/css/hyphens/index.html (limited to 'files/ru/web/css/hyphens') diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html new file mode 100644 index 0000000000..c6dc229c74 --- /dev/null +++ b/files/ru/web/css/hyphens/index.html @@ -0,0 +1,153 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +

CSS свойство hyphens указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Оно может полность запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.

+ +
{{EmbedInteractiveExample("pages/css/hyphens.html")}}
+ + + +

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang.

+ +
+

Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.

+
+ +

Синтаксис

+ +
/* Keyword values */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Global values */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

+ +

Значения

+ +
+
none
+
Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.
+
manual
+
Слова разрываются при переносе строки только там, где символы внутри слов указывают точки разрыва. Подробнее смотреть ниже  {{anch("Предлагаемые возможности разрыва строки")}}.
+
auto
+
Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Однако предлагаемые возможности разрыва строки (смотреть {{anch("Предлагаемые возможности разрыва строки")}} ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.
+
+ +
+

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута  lang, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

+
+ +

Предлагаемые возможности разрыва строки

+ +

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

+ +
+
U+2010 (HYPHEN)
+
«Жесткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис все равно отображается.
+
U+00AD (SHY)
+
Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте ­ для вставки мягкого дефиса.
+
+ +
+

Когда HTML элемент <wbr> приводит к разрыву строки, дефис не добавляется.

+
+ +

Формальное определение

+ +

{{cssinfo}}

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Указание переносов текста

+ +

В этом примере используются три класса, по одному для каждой возможной конфигурации свойства hyphens.

+ +

HTML

+ +
<dl>
+  <dt><code>none</code>: no hyphen; overflow if needed</dt>
+  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
+  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
+  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
+  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
+  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
+</dl>
+
+ +

CSS

+ +
dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +

Результат

+ +
+

{{EmbedLiveSample("Specifying_text_hyphenation", "100%", 490)}}

+
+ +

Характеристики

+ + + + + + + + + + + + + + + + +
ХарактеристикаСтатусКомментарий
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Первоначальное определение
+ +

Совместимость с браузером

+ +
+ + +

{{Compat("css.properties.hyphens")}}

+
+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf