文本排版
用于控制文本对齐方式的实用程序。
类 | 样式 |
---|---|
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">So I started to walk into the water...</p>
使用 text-right
实用程序右对齐元素的文本
所以我开始走向水中。我不会对你们撒谎,我很害怕。但我坚持了下来,当我穿过海浪时,一种奇怪的平静降临到我身上。我不知道这是神灵的干预还是所有生物的亲缘关系,但我告诉你杰瑞,那一刻,我就是一位海洋生物学家。
<p class="text-right">So I started to walk into the water...</p>
使用 text-center
实用程序居中元素的文本
所以我开始走向水中。我不会对你们撒谎,我很害怕。但我坚持了下来,当我穿过海浪时,一种奇怪的平静降临到我身上。我不知道这是神灵的干预还是所有生物的亲缘关系,但我告诉你杰瑞,那一刻,我就是一位海洋生物学家。
<p class="text-center">So I started to walk into the water...</p>
使用 text-justify
实用程序两端对齐元素的文本
所以我开始走向水中。我不会对你们撒谎,我很害怕。但我坚持了下来,当我穿过海浪时,一种奇怪的平静降临到我身上。我不知道这是神灵的干预还是所有生物的亲缘关系,但我告诉你杰瑞,那一刻,我就是一位海洋生物学家。
<p class="text-justify">So I started to walk into the water...</p>
前缀a text-align
实用程序 与诸如 md:
之类的断点变体一起使用,以便仅在中等 屏幕尺寸及以上时应用该实用程序
<p class="text-left md:text-center ..."> <!-- ... --></p>
了解有关在变体文档中使用变体的更多信息。