diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/css/text-transform | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/css/text-transform')
| -rw-r--r-- | files/zh-cn/web/css/text-transform/index.html | 434 |
1 files changed, 434 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/text-transform/index.html b/files/zh-cn/web/css/text-transform/index.html new file mode 100644 index 0000000000..dbf4a988bd --- /dev/null +++ b/files/zh-cn/web/css/text-transform/index.html @@ -0,0 +1,434 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS3 + - text-transform + - uppercase +translation_of: Web/CSS/text-transform +--- +<p>{{CSSRef}}</p> + +<h2 id="概要"><strong>概要</strong></h2> + +<p><strong>text-transform</strong> CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。</p> + +<p>text-transform属性考虑特定于语言的案例映射规则，如：</p> + +<ul> + <li> + <p>in Turkic languages, like Turkish (<code>tr</code>), Azerbaijani (<code>az</code>), Crimean Tatar (<code>crh</code>), Volga Tatar (<code>tt</code>), and Bashkir (<code>ba</code>), there are two kinds of i, with and without the dot, and two case pairings: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</p> + </li> + <li> + <p>In German (<code>de</code>), the <code>ß</code> becomes <code>SS</code> in uppercase.</p> + </li> + <li> + <p>In Dutch (<code>nl</code>), the <code>ij</code> digraph becomes <code>IJ</code>, even with <code>text-transform: capitalize</code>, which only put the first letter of a word in uppercase.</p> + </li> + <li> + <p>In Greek (<code>el</code>), vowels lose their accent when the whole word is in uppercase (<code>ά</code>/<code>Α</code>), except for the disjunctive eta (<code>ή</code>/<code>Ή</code>). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (<code>άι</code>/<code>ΑΪ</code>).</p> + </li> + <li> + <p>In Greek (<code>el</code>), the lowercase sigma character has two forms: <code>σ</code> and <code>ς</code>. <code>ς</code> is used only when sigma terminates a word. When applying <code>text-transform: lowercase</code> to an uppercase sigma (<code>Σ</code>), the browser needs to choose the right lowercase form based on context.</p> + </li> +</ul> + +<p>在其他一些其他特定的情况下，映射规则不被任何浏览器考虑在内：</p> + +<ul> + <li>in Gaelic (<code>ga</code>), a prefix letter remains in lowercase when the base initial is capitalised, so in this example the <code>h-</code> should not be capitalized: <code>text-transform: uppercase</code> will change <code>Meud na h-aplacaid</code> to <code>MEUD NA H-APLACAID</code> which violates the locale orthographic rules, as it ought to be <code>MEUD NA h-APLACAID.</code></li> +</ul> + +<p>语言由 lang HTML属性或 <code>xml:lang</code> XML属性定义。</p> + +<p>对于这些特定情况的支持因浏览器而异，因此请检查<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-transform$edit#Browser_compatibility">浏览器兼容性表</a>。 </p> + +<p>{{cssinfo}}</p> + +<h2 id="句法">句法</h2> + +<pre><code>/* Keyword values */ +text-transform: capitalize; +text-transform: uppercase; +text-transform: lowercase; +text-transform: none; +text-transform: full-width; + +/* Global values */ +text-transform: inherit; +text-transform: initial; +text-transform: unset;</code></pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code>capitalize</code></dt> + <dd> + <p>这个关键字强制每个单词的首字母转换为大写。其他的字符保留不变（它们写在元素里的文本保留原始大小写）。字母是Unicode字符集或者数字里定义的字符 {{experimental_inline}}；因此单词开头的任何标点符号或者特殊符号将会被忽略。</p> + + <p>Authors should not expect <code>capitalize</code> to follow language-specific titlecasing conventions (such as skipping articles in English).</p> + </dd> + <dt><code>uppercase</code></dt> + <dd>这个关键字强制所有字符被转换为大写。</dd> + <dt><code>lowercase</code></dt> + <dd>这个关键字强制所有字符被转换为小写。</dd> + <dt><code>none</code></dt> + <dd>这个关键字阻止所有字符的大小写被转换。</dd> + <dt><code>full-width</code> {{experimental_inline}}</dt> + <dd>这个关键字强制字符 — 主要是表意字符和拉丁文字 — 书写进一个方形里，并允许它们按照一般的东亚文字（比如中文或日文）对齐。</dd> +</dl> + +<h3 id="正式语法">正式语法</h3> + +<pre>{{csssyntax}}</pre> + +<h2 id="例子">例子</h2> + +<h3 id="none" name="none"><code>none</code></h3> + +<pre><p>Initial String <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p></code> +<p>text-transform: none <strong><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span></strong> </p></pre> + +<pre><code>span { + text-transform: none; +} +strong { float: right; }</code></pre> + +<p>This demonstrates no text transformation.</p> + +<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p> + +<h3 id="capitalize_(General)" name="capitalize_(General)">首字母大写<code>capitalize</code> (普通)</h3> + +<pre><p>Initial String <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p></code> <p>text-transform: capitalize <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> </p></pre> + +<pre><code>span { + text-transform: capitalize; +} +strong { float: right; }</code></pre> + +<p>This demonstrates text capitalization.</p> + +<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)">首字母大写 (标点)</h3> + +<pre><p>Initial String <strong><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code></strong> </p></code> <p>text-transform: capitalize <code><strong></code><span><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></span><code></strong></code> </p></pre> + +<pre><code>span { + text-transform: capitalize; +} +strong { float: right; }</code></pre> + +<p>This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.</p> + +<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)">首字母大写(符号)</h3> + +<pre><p>Initial String <strong><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code></strong> </p></code> <p>text-transform: capitalize <code><strong></code><span><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></span><code></strong></code></p></pre> + +<pre><code>span { + text-transform: capitalize; +} +strong { float: right; }</code></pre> + +<p>This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.</p> + +<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)">首字母大写 (荷兰ij有向图)</h3> + +<pre><p>Initial String <strong lang="nl"><code>The Dutch word: "ijsland" starts with a digraph.</code><code></strong> </p></code> <p>text-transform: capitalize <code><strong></code><span lang="nl"><code>The Dutch word: "ijsland" starts with a digraph.</code></span><code></strong></code> </p></pre> + +<pre><code>span { + text-transform: capitalize; +} +strong { float: right; }</code></pre> + +<p>This demonstrates how the Dutch <em>ij</em> digraph must be handled like one single letter.</p> + +<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p> + +<h3 id="uppercase_(General)" name="uppercase_(General)">大写字母<code>uppercase</code> (普通)</h3> + +<pre><p>Initial String <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> </p></code> <p>text-transform: uppercase <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> </p></pre> + +<pre><code>span { + text-transform: uppercase; +} +strong { float: right; }</code></pre> + +<p>This demonstrates transforming the text to uppercase.</p> + +<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p> + +<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)">大写字母(希腊元音)</h3> + +<pre><p>Initial String <strong><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code></strong> </p></code><p>text-transform: uppercase <code><strong></code><span><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code></span><code></strong></code> </p></pre> + +<pre><code>span { + text-transform: uppercase; +} +strong { float: right; }</code></pre> + +<p>This demonstrates how Greek vowels except disjunctive <em>eta</em> should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.</p> + +<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p> + +<h3 id="lowercase_(General)" name="lowercase_(General)">小写字母<code>lowercase</code> (普通)</h3> + +<pre><p>Initial String <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> </p></code> <p>text-transform: lowercase <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> </p></pre> + +<pre><code>span { + text-transform: lowercase; +} +strong { float: right; }</code></pre> + +<p>This demonstrates transforming the text to lowercase.</p> + +<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p> + +<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)">小写字母 (希腊语Σ)</h3> + +<pre><p>Initial String <strong><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code></strong> </p></code> <p>text-transform: lowercase <code><strong></code><span><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></span><code></strong></code> </p></pre> + +<pre><code>span { + text-transform: lowercase; +} +strong { float: right; }</code></pre> + +<p>This demonstrates how the Greek character sigma (<code>Σ</code>) is transformed into the regular lowercase sigma (<code>σ</code>) or the word-final variant (<code>ς</code>), according the context.</p> + +<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p> + +<h3 id="full-width_(General)" name="full-width_(General)">全宽度<code>full-width</code> (普通)</h3> + +<pre><p>Initial String <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~<code></strong> </p></code> <p>text-transform: full-width <code><strong></code><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span><code></strong></code> </p></pre> + +<pre><code>span { + text-transform: full-width; +} +strong { width: 100%; float: right; }</code></pre> + +<p>Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.</p> + +<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>From {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, adds the <code>full-size-kana</code>keyword and allows the <code>full-width</code> keyword to be used together with another keyword.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>From {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, extends letters to any Unicode character in the Number or Letter general category. Modifies the behavior of <code>capitalize</code> to apply to the first letter of the word, ignoring initial punctuations or symbols. Adds the <code>full-width</code>keyword to mix smoothly ideographic characters and alphabetical characters.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>From {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extends letters to non-latin bi-cameral scripts</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="浏览器兼容性">浏览器兼容性 </h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>capitalize</code>(CSS3 version)</td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("14")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>full-size-kana</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>full-width</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ß</code> → <code>SS</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>i</code> → <code>İ</code> and <code>ı</code>→ <code>I</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Dutch <code>IJ</code>digraph</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Greek accented letters</td> + <td>30</td> + <td>{{CompatGeckoDesktop("15")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>Σ</code> → <code>σ</code> or word-final <code>ς</code></td> + <td>30</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6.0</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>capitalize</code>(CSS3 version)</td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("14")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>full-size-kana</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>full-width</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ß</code> → <code>SS</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>i</code> → <code>İ</code> and <code>ı</code>→ <code>I</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Dutch <code>IJ</code>digraph</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Greek accented letters</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>Σ</code> → <code>σ</code> or word-final <code>ς</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> + +<p>[1] The <code>capitalize</code> keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and _ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like <code>ⓐ</code> to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The <code>capitalize</code> line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.</p> + +<p> </p> + +<p>/////////////////////////////////////////////////////////////////////////////////////////////////////////////////</p> + +<p> </p> |