Hyphenation
[Это предварительная документация, которая может изменяться.]
Windows Internet Explorer 10 and приложения в стиле Metro, использующие JavaScript in Windows Developer Preview introduce support for an important текст CSS, уровень 3 feature: hyphenation. Automatic hyphenation is especially useful given the new support for multi-column layout. Specifically, by using спецификация каскадных таблиц стилей (CSS), уровень 3 (CSS3) Hyphenation, you can do the following:
- Hyphenate text automatically according to a built-in dictionary
- Specify the minimum number of characters a word must have before it can be hyphenated
- Specify a minimum word fragment length following a hyphenation break
- Specify a minimum word fragment length preceding a hyphenation break
- Specify a hyphenation "zone," outside of which hyphenation is forced
- Specify a maximum number of consecutive hyphenated lines
Примечание Because of the preliminary status of the Hyphenation portion of the CSS3 Text Working Draft, the properties in this topic must be used with the Майкрософт-specific vendor prefix, "-ms-", to work with Internet Explorer 10.
This topic contains the following sections:
- The -ms-hyphens property
- The -ms-hyphenate-limit-zone property
- The -ms-hyphenate-limit-chars property
- The -ms-hyphenate-limit-lines property
- Связанные разделы
The following markup example shows a small portion of text with no hyphenation properties applied. We use this example to show the hyphenation properties.
<!DOCTYPE html>
<html lang="en-us">
<body>
<div style="width: 130px; border: 1px solid black;">
<p style="text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus. Curabitur scelerisque arcu a leo
mollis porta. Ut eu quam ut odio tempor ornare.</p>
</div>
</body>
</html>
This markup appears like this in Internet Explorer 10:
.png "A short selection of justified text within a narrow box, with no hyphenation properties applied. There are significant gaps between words")
The -ms-hyphens property
The -ms-hyphens property turns on hyphenation. Its syntax is shown here:
| Property | Описание |
|---|---|
|
Indicates whether additional break opportunities for the current line are created by hyphenating individual words within the line. The -ms-hyphens property can be set to one of the following values:
|
Following is an example of the -ms-hyphens property in use, when it has been set to auto:
<!DOCTYPE html>
<html lang="en-us">
<body>
<div style="width: 130px; border: 1px solid black;">
<p style="-ms-hyphens: auto; text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus.
Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor ornare.</p>
</div>
</body>
</html>
This markup appears like this in Internet Explorer 10:
.png "The same short selection of justified text within a narrow box as the previous image, with the -ms-hyphens property set to ‘auto’ applied. The gaps are less pronounced than in the previous image, as several words have been automatically hyphenated")
The -ms-hyphenate-limit-zone property
The -ms-hyphenate-limit-zone property defines the width of the hyphenation "zone," or trailing whitespace (not counting the effects of justification) that can be left in the line before hyphenation is triggered. Its syntax is shown here:
| Property | Описание |
|---|---|
Specifies the maximum amount of unfilled space (before justification) that can be left in the line before hyphenation is triggered. The value can be a nonnegative percentage (of the total line width) or a length value. |
Following is an example of the -ms-hyphenate-limit-zone property.
<!DOCTYPE html>
<html lang="en-us">
<body>
<div style="width: 130px; border: 1px solid black;">
<p style="-ms-hyphens: auto; -ms-hyphenate-limit-zone: 50px; text-align: justify; font-size: 11pt;">
. . .
</p>
</div>
</body>
</html>
In this case, the zone length is 50 pixels. Any line that, before justification, would contain text that ended before the hyphenation zone would, in effect, "pull" a hyphenated part of a word from the next line into the current line. The following image shows this. In this case, the second and sixth lines of text (highlighted in pink) are not long enough to extend into the hyphenation zone. Therefore, the first word of both the following lines is hyphenated, and the first hyphenated portion of the word is moved onto the previous line.
.png "A before-and-after example of a selection of text inside a content box with a hyphenation zone. The “before” text’s second and sixth lines contain text that doesn’t extend to within the hyphenation zone. In the “after” example, the first word of the third and seventh lines has been hyphenated, and the first portion of the word has been moved up to the end of the previous line")
The -ms-hyphenate-limit-chars property
The -ms-hyphenate-limit-chars property indicates the minimum number of characters in a hyphenated word. Its syntax is shown here:
| Property | Описание |
|---|---|
Specifies one to three values that indicate the minimum number of characters in a hyphenated word. If the word does not meet the required minimum number of characters, before the hyphen, or after the hyphen, the word is not hyphenated.
You can also use the auto keyword to replace any or all values. The auto keyword corresponds to the values "5 2 2", indicating a 5-character word limit, 2 characters required before a hyphenation break, and 2 characters required following a hyphenation break. See the -ms-hyphenate-limit-chars property reference page to find out what happens if you leave out one of these values. |
Following is an example of the -ms-hyphenate-limit-chars property in use. In this case, it is set to "auto 3", which indicates that the minimum size of the word is automatic (that is, 5), and that the minimum number of characters both before and after a hyphenation break is 3. This means that the word that was hyphenated in the previous example after two characters, "ultricies," will no longer be hyphenated in that way.
<!DOCTYPE html>
<html lang="en-us">
<body>
<div style="width: 130px; border: 1px solid black;">
<p style="-ms-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; text-align: justify; font-size: 11pt;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac
ultricies nisl rhoncus. Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor
ornare.</p>
</div>
</body>
</html>
This markup appears like the following image Internet Explorer 10:
.png "The same short selection of justified text within a narrow box as shown in the first image, with the -ms-hyphens property set to ‘auto’ and the -ms-hyphenate-limit-chars property set to ‘auto 3’. The word “ultiricies,” which previously was hyphenated after two characters, is now unhyphenated and appears on the following line")
Notice that the word "ultricies" now appears without hyphenation on its own line.
The -ms-hyphenate-limit-lines property
The -ms-hyphenate-limit-lines property indicates the maximum number of consecutive hyphenated lines in an element. Its syntax is shown here:
| Property | Описание |
|---|---|
Specifies the maximum number of consecutive lines in an element that can end with a hyphenated word. This property can be set to an integer value or to the no-limit keyword, which indicates there is no limit to the number of consecutive lines that can end with a hyphenated word. |