Typography
用於控制文字對齊的通用類別。
| Class | Styles |
|---|---|
text-left | text-align: left; |
text-center | text-align: center; |
text-right | text-align: right; |
text-justify | text-align: justify; |
text-start | text-align: start; |
text-end | text-align: end; |
使用 text-left 通用類別將元素的文字靠左對齊：
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-left">So I started to walk into the water...</p>使用 text-right 通用類別將元素的文字靠右對齊：
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-right">So I started to walk into the water...</p>使用 text-center 通用類別將元素的文字置中對齊：
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-center">So I started to walk into the water...</p>使用 text-justify 通用類別將元素的文字左右對齊：
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-justify">So I started to walk into the water...</p>使用 text-start 和 text-end 通用類別，這些類別使用邏輯屬性來根據文字方向對應到左側或右側：
بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية.
<div dir="rtl" lang="ar"> <p class="text-end">فبدأت بالسير نحو الماء...</p></div>在 text-align 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<p class="text-left md:text-center ..."> Lorem ipsum dolor sit amet...</p>在變體文件中了解更多關於使用變體的資訊。