排版
text-align
用于控制文本对齐的工具类.
| 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 工具类将元素的文本左对齐：
所以我开始走进水里。我不会对你们撒谎，伙计们，我很害怕。但我坚持下来了，当我越过海浪时，一种奇怪的平静涌上心头。我不知道那是神的干预还是所有生物之间的亲情，但我告诉你，杰瑞，那一刻，我是一名海洋生物学家。
<p class="text-left">我开始走进水里...</p>右对齐文本
使用 text-right 工具类将元素的文本右对齐：
所以我开始走进水里。我不会对你们撒谎，伙计们，我很害怕。但我坚持下来了，当我越过海浪时，一种奇怪的平静涌上心头。我不知道那是神的干预还是所有生物之间的亲情，但我告诉你，杰瑞，那一刻，我是一名海洋生物学家。
<p class="text-right">我开始走进水里...</p>居中对齐文本
使用 text-center 工具类将元素的文本居中对齐：
所以我开始走进水里。我不会对你们撒谎，伙计们，我很害怕。但我坚持下来了，当我越过海浪时，一种奇怪的平静涌上心头。我不知道那是神的干预还是所有生物之间的亲情，但我告诉你，杰瑞，那一刻，我是一名海洋生物学家。
<p class="text-center">我开始走进水里...</p>两端对齐文本
使用 text-justify 工具类将元素的文本两端对齐：
所以我开始走进水里。我不会对你们撒谎，伙计们，我很害怕。但我坚持下来了，当我越过海浪时，一种奇怪的平静涌上心头。我不知道那是神的干预还是所有生物之间的亲情，但我告诉你，杰瑞，那一刻，我是一名海洋生物学家。
<p class="text-justify">所以我开始走进水里......</p>使用逻辑属性
使用 text-start 和 text-end 工具类，这些工具类使用逻辑属性，根据文本方向映射到左侧或右侧：
بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية.
<div dir="rtl" lang="ar"> <p class="text-end">فبدأت بالسير نحو الماء...</p></div>响应式设计
Prefix a text-align utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="text-left md:text-center ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.
