path: root/files/zh-cn/web/css/text-transform/index.html

---
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>&lt;p&gt;Initial String &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt; &lt;/p&gt;</code>
&lt;p&gt;text-transform: none &lt;strong&gt;&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;&lt;/strong&gt; &lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt; &lt;/p&gt;</code> &lt;p&gt;text-transform: capitalize <code>&lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code> &lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong&gt;<code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code>&lt;/strong&gt; &lt;/p&gt;</code> &lt;p&gt;text-transform: capitalize <code>&lt;strong&gt;</code>&lt;span&gt;<code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code>&lt;/span&gt;<code>&lt;/strong&gt;</code> &lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong&gt;<code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code>&lt;/strong&gt; &lt;/p&gt;</code> &lt;p&gt;text-transform: capitalize <code>&lt;strong&gt;</code>&lt;span&gt;<code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>&lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong lang="nl"&gt;<code>The Dutch word: "ijsland" starts with a digraph.</code><code>&lt;/strong&gt; &lt;/p&gt;</code> &lt;p&gt;text-transform: capitalize <code>&lt;strong&gt;</code>&lt;span lang="nl"&gt;<code>The Dutch word: "ijsland" starts with a digraph.</code>&lt;/span&gt;<code>&lt;/strong&gt;</code> &lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code>&lt;/strong&gt; &lt;/p&gt;</code> &lt;p&gt;text-transform: uppercase <code>&lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code> &lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong&gt;<code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code>&lt;/strong&gt; &lt;/p&gt;</code>&lt;p&gt;text-transform: uppercase <code>&lt;strong&gt;</code>&lt;span&gt;<code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code>&lt;/span&gt;<code>&lt;/strong&gt;</code> &lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code>&lt;/strong&gt; &lt;/p&gt;</code> &lt;p&gt;text-transform: lowercase <code>&lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code> &lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong&gt;<code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code>&lt;/strong&gt; &lt;/p&gt;</code> &lt;p&gt;text-transform: lowercase <code>&lt;strong&gt;</code>&lt;span&gt;<code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code>&lt;/span&gt;<code>&lt;/strong&gt;</code> &lt;/p&gt;</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>&lt;p&gt;Initial String &lt;strong&gt;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~<code>&lt;/strong&gt; &lt;/p&gt;</code> &lt;p&gt;text-transform: full-width <code>&lt;strong&gt;</code>&lt;span&gt;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~&lt;/span&gt;<code>&lt;/strong&gt;</code> &lt;/p&gt;</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>