排版
text-align
用于控制文本对齐的工具。
| 类 | 样式 |
|---|---|
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; |
示例(Examples)
左对齐文本(Left aligning text)
使用 text-left 工具将元素的文本左对齐：
🌐 Use the text-left utility to left align the text of an element:
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>右对齐文本(Right aligning text)
使用 text-right 工具将元素的文本右对齐：
🌐 Use the text-right utility to right align the text of an element:
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>居中文本(Centering text)
使用 text-center 工具将元素的文本居中：
🌐 Use the text-center utility to center the text of an element:
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>对齐文本(Justifying text)
使用 text-justify 工具来调整元素的文本对齐方式：
🌐 Use the text-justify utility to justify the text of an element:
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>使用逻辑属性(Using logical properties)
使用 text-start 和 text-end 工具，它们使用 逻辑属性 根据文本方向映射到左侧或右侧：
🌐 Use the text-start and text-end utilities, which use logical properties to map to either the left or right side based on the text direction:
بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية.
<div dir="rtl" lang="ar"> <p class="text-end">فبدأت بالسير نحو الماء...</p></div>响应式设计(Responsive design)
在 text-align 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<p class="text-left md:text-center ..."> Lorem ipsum dolor sit amet...</p>请参阅 变体文档 详细了解如何使用变体。