---
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>
{{csssyntax}}
<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>
{{Compat("css.properties.text-transform")}}