排版
控制文本对齐方式的工具类。
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>
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 ..."> <!-- ... --></p>
Learn more about using variants in the variants documentation.