範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
Hello, world!
<span class="ts-text">Hello, world!</span>種類
在側邊帶有圖示的連結。
<a class="ts-text is-icon-link">
<span class="ts-icon is-arrow-left-icon"></span>
返回上一頁
</a>展示一個程式碼片段。
透過 ts-button 能夠讓你的按鈕看起來特別像按鈕，蒸蚌！
透過 <span class="ts-text is-code">ts-button</span> 能夠讓你的按鈕看起來特別像按鈕，蒸蚌！作為某個物體的標籤，例如：輸入欄位、數據。
使用者帳號
<span class="ts-text is-label">使用者帳號</span>
<div class="ts-input has-top-spaced-small">
<input type="text">
</div>用來說明某些行為的小型不起眼文字。
由於系統快取的緣故，你所造成的變更會在 24 小時之後才生效。
<button class="ts-button">儲存變更</button>
<div class="ts-text is-description has-top-spaced-small">
由於系統快取的緣故，你所造成的變更會在 24 小時之後才生效。
</div>將指定文字偏上或偏下。
朋友買了一件衣料，綠色的底子帶白色方格，當她拿給我們看時[8]：
「關我屁事？」我說。
我們不禁哄堂大笑，同樣的一件衣料[9]到底關其他人屁事。
<p>朋友買了一件衣料，綠色的底子帶白色方格，當她拿給我們看時<span class="ts-text is-sup">[8]</span>：</p>
<p>「關我屁事？」我說。</p>
<p>我們不禁哄堂大笑，同樣的一件衣料<span class="ts-text is-sub">[9]</span>到底關其他人屁事。</p>類似鍵盤快捷鍵的提示文字。
按下 shift + H 以開始。
按下 <span class="ts-text is-key">shift</span> + <span class="ts-text is-key">H</span> 以開始。狀態
以紅色的星號在文字尾端作為必填提示，通常會和標籤一起搭配表示某個輸入欄位不得留空。
<label class="ts-checkbox">
<input type="checkbox" checked />
<span class="ts-text is-required">我已年滿 18 歲</span>
</label>外觀
令文字傾斜，通常用於特別標註某個代名詞或是該注意的事物。
我不建議你打開後面的那扇門，在那裡面有一個他親自打造的世界。
我不建議你打開後面的那扇門，在那裡面有一個他親自打造的<span class="ts-text is-italic">世界</span>。在底部下劃一條線，通常用以標註特別名稱。
在卡萊迪亞的中央重生區有著一個巨大的水晶。
在<span class="ts-text is-underlined">卡萊迪亞</span>的中央重生區有著一個巨大的水晶。文字超過一定寬度之後就會被截斷而不會換行或溢出，通常父容器需要有個固定寬度。
豔陽高照，前方的道路什麼都看不見。明明不清楚前方的事物，卻感覺自己正在邁向的是一個新世界。
<div class="ts-text is-truncated" style="max-width: 300px">
豔陽高照，前方的道路什麼都看不見。明明不清楚前方的事物，卻感覺自己正在邁向的是一個新世界。
</div>強制使某段文字大小寫，僅能用於英文。
Here comes another world.
Here comes another world.
<div class="ts-text is-uppercased">Here comes another world.</div>
<div class="ts-text is-lowercased">Here comes another world.</div>更改文字的對齊方式。
置起始位置
置中對齊
置結束位置
<div class="ts-text is-start-aligned">置起始位置</div>
<div class="ts-text is-center-aligned">置中對齊</div>
<div class="ts-text is-end-aligned">置結束位置</div>在文字換行時，自動均衡字元之間的空白寬度來避免結尾有視覺上不平衡的空白。
This paragraph uses "Justify" to automatically equalize the gaps between characters for a more balanced and comfortable visual appearance. 這段文字使用了《均衡對齊》能夠自動均衡字元之間的空白，使視覺上看起來更平衡舒適。
<div class="ts-text is-justify-aligned">
This paragraph uses "Justify" to automatically equalize the gaps between characters for a more balanced and comfortable visual appearance. 這段文字使用了《均衡對齊》能夠自動均衡字元之間的空白，使視覺上看起來更平衡舒適。
</div>更改文字的大小。
(微小) Tocas UI 來自台灣。
(小的) Tocas UI 來自台灣。
(預設) Tocas UI 來自台灣。
(大的) Tocas UI 來自台灣。
(更大) Tocas UI 來自台灣。
(巨大) Tocas UI 來自台灣。
(重量級) Tocas UI 來自台灣。
<div class="ts-text is-tiny">(微小) Tocas UI 來自台灣。</div>
<div class="ts-text is-small">(小的) Tocas UI 來自台灣。</div>
<div class="ts-text is-medium">(預設) Tocas UI 來自台灣。</div>
<div class="ts-text is-large">(大的) Tocas UI 來自台灣。</div>
<div class="ts-text is-big">(更大) Tocas UI 來自台灣。</div>
<div class="ts-text is-huge">(巨大) Tocas UI 來自台灣。</div>
<div class="ts-text is-massive">(重量級) Tocas UI 來自台灣。</div>在尋找相似的元件嗎？
