實用文字樣式

除了常見的文字樣式，CSS 也有一些相當實用的文字樣式，例如 text-overflow、text-transform、text-combine-upright、ruby-position、paint-order 等，透過這些文字樣式可以進行大小寫轉換、文字超過範圍的顯示行為、連字號或文字外框線等效果，這篇教學會介紹相關樣式的用法。

實用文字樣式

下方列出實用的文字樣式屬性，這些樣式都具有繼承特性：

text-transform 文字大小寫轉換

text-transform 樣式屬性可以設定「文字大小寫轉換」，主要針對「英文字母語系」，具有下列幾種屬性值：

下方範例會呈現這些屬性值的差異。

線上展示：https://codepen.io/oxxo/pen/qEWppLJ

<!-- HTML 程式碼 -->
<h2>APPLE banana orange</h2>
<h2>APPLE banana orange</h2>
<h2>APPLE banana orange</h2>
<h2>APPLE banana orange</h2>
<!-- 注意下方子元素為單一字母的字型 -->
<h2>sin(<span>x</span>) + cos(<b>y</b>) + <span>sin(x)</span> + <span>cos(y)</span></h2>

<!-- CSS 程式碼 -->
<style>
  h2:nth-child(1) {text-transform: none;}
  h2:nth-child(2) {text-transform: capitalize;}
  h2:nth-child(3) {text-transform: uppercase;}
  h2:nth-child(4) {text-transform: lowercase;}
  h2:nth-child(5) {text-transform: math-auto;}
</style>

text-overflow 文字超過範圍的顯示行為

text-overflow 樣式屬性可以設定「文字超過範圍的顯示行為」，需要搭配強制不換行 white-space: nowrap; 和超過裁切 overflow: hidden; 的樣式屬性才有作用，預設值 clip 表示超過範圍的文字會被裁切隱藏，改用 ellipsis 則右側結尾處會使用「...」表現這段文字後方省略了其他文字，在右到左書寫模式「...」會改到左側，下方範例會呈現這兩種屬性值的差異。

線上展示：https://codepen.io/oxxo/pen/jENYYgB

<!-- HTML 程式碼 -->
<h2>STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</h2>
<h2>STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</h2>
<h2>STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</h2>

<!-- CSS 程式碼 -->
<style>
  h2 {
    width: 300px;
    height: 50px;
    border: 1px solid #000;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
  }
  h2:nth-child(1){text-overflow: clip;}
  h2:nth-child(2){text-overflow: ellipsis;}
  h2:nth-child(3){
    direction: rtl;
    text-overflow: ellipsis;
  }
</style>

text-combine-upright 垂直水平書寫方向整合

text-combine-upright 樣式屬性可以設定「垂直水平書寫方向整合」，預設值 none 表示當書寫方向改成垂直時，英文語數字會反轉 90 度，如果設定為 all，就可以讓英文或數字維持原本的水平方向，但需要注意如果英文字母或數字字數過多，因為水平方向大小仍然會維持「一個字的大小」，就會發生壓縮變形的狀況。

下方範例中間的 div，因為後方「ABCDE」只透過一個 span 包覆，所以轉換成水平方向後大小就會被壓縮，而右邊的 div 因為將五個字母分別獨立，就會呈現正常的顯示模式。

線上展示：https://codepen.io/oxxo/pen/VYZyQeo

<!-- HTML 程式碼 -->
<h2>中華民國 114 年 5 月 1 號，一起來唸 ABCDE</h2>
<h2>中華民國 <span>114</span> 年 <span>5</span> 月 <span>1</span> 號，一起來唸 <span>ABCDE</span></h2>
<h2>中華民國 <span>114</span> 年 <span>5</span> 月 <span>1</span> 號，一起來唸 <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span></h2>
  

<!-- CSS 程式碼 -->
<style> 
  h2 {
    height: 320px;
    border: 1px solid #000;
    writing-mode: vertical-lr;
    float: left;
  }
  h2 span {
    text-combine-upright: all;
  };
</style>

ruby-position 標注文字的位置

ruby-position 樣式屬性可以設定「標注文字的位置」，標注文字表示 <ruby> 與 <rt> 元素文字，主要作為文字的發音或注譯 ( 餐考「HTML 標注文字 )，預設值 over 表示標注文字位於文字上方，設定 under 會將標注文字移動到文字下方，下方範例會呈現兩種屬性值的差異。

線上展示：https://codepen.io/oxxo/pen/gbYovgr

<!-- HTML 程式碼 -->
<h2><ruby>床<rt>ㄔㄨㄤˊ</rt>前<rt>ㄑㄧㄢˊ</rt>明<rt>ㄇㄧㄥˊ</rt>月<rt>ㄩㄝˋ</rt>光<rt>ㄍㄨㄤ</rt></ruby></h2>
<h2><ruby>床<rt>ㄔㄨㄤˊ</rt>前<rt>ㄑㄧㄢˊ</rt>明<rt>ㄇㄧㄥˊ</rt>月<rt>ㄩㄝˋ</rt>光<rt>ㄍㄨㄤ</rt></ruby></h2>

<!-- CSS 程式碼 -->
<style> 
  h2 {font-size: 40px;}
  h2:nth-child(2){ruby-position: under;}
</style>

text-underline-offset 底線上下定位

text-underline-offset 樣式屬性可以設定「底線的上下定位」，當文字套用底線樣式後，可以設定底線往上移動還是往下移動，預設值 auto，設定時使用絕對長度單位或百分比單位，百分比單位表示「元素文字大小 x 百分比 + 1em」，下方範例會展示三種屬性值的效果，從中可以看出設定為「百分比」單位的底線，會自動加上 1em ( 30px x 0.1 = 3px )。

線上展示：https://codepen.io/oxxo/pen/BaXXzJO

<!-- HTML 程式碼 -->
<h2>Hello OXXO!! ( auto )</h2>
<h2>Hello OXXO!! ( text-underline-offset: 20px; )</h2>
<h2>Hello OXXO!! ( text-underline-offset: 60%; )</h2>
<h2>Hello OXXO!! ( text-underline-offset: -15px; )</h2>
<h2>Hello OXXO!! ( text-underline-offset: -50%; )</h2>

<!-- CSS 程式碼 -->
<style>
  h2 {
    text-decoration: underline red;
    font-size: 30px;
  }
  h2:nth-of-type(2) {text-underline-offset: 20px;}
  h2:nth-of-type(3) {text-underline-offset: 60%;}
  h2:nth-of-type(4) {text-underline-offset: -15px;}
  h2:nth-of-type(5) {text-underline-offset: -50%;}
</style>

text-underline-position 底線位置

text-underline-position 樣式屬性可以設定「底線位置」，此處的底線位置表示「預設參考位置」，無法透過數值調整，只能透過屬性值設定預設參考位置。

下方範例會呈現這些屬性值的微小差異，注意「pjQ」和「括號」之間的底線有些微不同。

線上展示：https://codepen.io/oxxo/pen/MWNNeQg

<!-- HTML 程式碼 -->
<h2>gpjQ ( text-underline-position: auto; )</h2>
<h2>gpjQ ( text-underline-position: from-font; )</h2>
<h2>gpjQ ( text-underline-position: under; )</h2>

<!-- CSS 程式碼 -->
<style>
  h2 {
    text-decoration: underline red;
    font-size: 30px;
  }
  h2:nth-of-type(1) {text-underline-position: auto;}
  h2:nth-of-type(2) {text-underline-position: from-font;}
  h2:nth-of-type(3) {text-underline-position: under;}
</style>

paint-order 文字外框

paint-order 樣式屬性可以設定「文字外框」，需要搭配 webkit 相關樣式屬性 -webkit-text-stroke 才有作用，有下列幾種屬性值：

下方範例呈現這些屬性值的差異。

線上展示：https://codepen.io/oxxo/pen/ByBJYJW

<!-- HTML 程式碼 -->
<h2>oxxo.studio</h2>
<h2>oxxo.studio</h2>
<h2>oxxo.studio</h2>
<h2>oxxo.studio</h2>

<!-- CSS 程式碼 -->
<style> 
  h2 {
    font-size: 50px;
    -webkit-text-stroke: 5px orange;
    margin: 10px;
  }
  h2:nth-child(1){paint-order: normal;}
  h2:nth-child(2){paint-order: fill;}
  h2:nth-child(3){paint-order: stroke;}
  h2:nth-child(4){paint-order: stroke fill;}
</style>

小結

雖然大部分的情形都用不到這篇教學所介紹的文字樣式，不過像是注音標註的位置、多餘的文字隱藏後產生「...」，甚至是英文字母的大小寫轉換...等其實都相當實用，如果有機會，不妨運用這些文字樣式，替網頁的文字或選單增添更多變化。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～