blob: 206207acd91cdc395f11d3627791dfaacec5cba7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: text-decoration-skip
slug: Web/CSS/text-decoration-skip
translation_of: Web/CSS/text-decoration-skip
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">The <strong><code>text-decoration-skip</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property specifies what parts of the element’s content any text decoration affecting the element must skip over.</span> It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.</p>
<pre class="brush:css no-line-numbers">/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: ink;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;
/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: ink edges box-decoration;
/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>none</code></dt>
<dd>Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes.</dd>
<dt><code>objects</code></dt>
<dd>The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.</dd>
<dt><code>spaces</code></dt>
<dd>All spacing is skipped, i.e. all <a href="http://www.unicode.org/reports/tr44/#White_Space">Unicode white space characters</a> and all word separators, plus any adjacent {{cssxref("letter-spacing")}} or {{cssxref("word-spacing")}}.</dd>
<dt><code>ink</code></dt>
<dd>The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.</dd>
<dd><img alt='An example of "text-decoration-skip: ink;".' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd>
<dt><code>edges</code></dt>
<dd>The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)</dd>
<dd><img alt='An example of "text-decoration-skip: edges;".' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png"></dd>
<dt><code>box-decoration</code></dt>
<dd>The text decoration is skipped over the box's margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a <em>decorating box</em> never draws over its own box decoration.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
<p class="syntaxbox">{{csssyntax}}</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="HTML_content">HTML content</h3>
<pre class="brush: html"><p>Hey, grab a cup of coffee!</p></pre>
<h3 id="CSS_content">CSS content</h3>
<pre class="brush: css; highlight[4]">p {
margin: 0;
font-size: 3em;
text-decoration: underline;
text-decoration-skip: ink;
}</pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Example", "100%", 60)}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}</td>
<td>{{Spec2("CSS3 Text Decoration")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(57)}}</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera(44)}}</td>
<td>{{CompatNo}}<sup>[3]</sup></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(57)}}</td>
<td>{{CompatChrome(57)}}</td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatOperaMobile(44)}}</td>
<td>{{CompatNo}}<sup>[3]</sup></td>
</tr>
</tbody>
</table>
</div>
<p>[1] This feature is not implemented yet. See {{bug(812990)}}.</p>
<p>[2] This feature is not implemented yet. See the <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514536-text-decoration-styling">related request</a>.</p>
<p>[3] Safari implements a {{property_prefix("-webkit")}} prefixed version of this property since version 8, though only supports the value <code>none</code> and the non-standard value <code>skip</code>. All other values behave like those two values.</p>
|
