文字样式 ( 其他实用 )

除了常见的文字样式，CSS 也有一些相当实用的文字样式，例如 text-overflow、text-transform、text-combine-upright、ruby-position、paint-order 等，透过这些文字样式可以进行大小写转换、文字超过范围的显示行为、连字号或文字外框线等效果，这篇教学会介绍相关样式的用法。

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

实用文字样式

下方列出实用的文字样式属性，这些样式都具有继承特性：

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，设定时使用绝对长度单位、百分比单位或 em 单位，百分比单位表示“元素文字大小 x N百分比 + 1em”，em 单位表示“元素文字大小 x N em + 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 样式属性可以设定“底线位置”，此处的底线位置表示“默认参考位置”，无法透过数值调整，只能透过属性值设定默认参考位置。

下方范例会呈现这些属性值的微小差异，注意“gpjQ”和“括号”之间的底线有些微不同。

线上展示：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 样式属性可以设定“文字外框”，有下列几种属性值：

使用 paint-order 需要搭配 webkit 相关样式属性 -webkit-text-stroke 才有作用 ( 类似 -webkit-text-stroke 的辅助设定功能 )，-webkit-text-stroke 是支援 -webkit- 厂商前缀字的浏览器才可以使用 ( Chrome、Edge、Safari 应该都支援 )，单纯使用也可以产生文字外框线，写法如下：

div {
  -webkit-text-stroke: 2px red; /* 粗細和顏色 */
}

下方范例会呈现 paint-order 不同属性值的差异。

线上展示：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>

小结

虽然大部分的情形都用不到这篇教学所介绍的文字样式，不过像是注音标注的位置、多余的文字隐藏后产生“...”，甚至是英文字母的大小写转换...等其实都相当实用，如果有机会，不妨运用这些文字样式，替网页的文字或选单增添更多变化。

意见反馈