?
This document uses PHP Chinese website manual Release
常見文本工具的文檔和示例,以控制對(duì)齊,包裝,重量等等。
輕松地將文本重新對(duì)齊到具有文本對(duì)齊類的組件。
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
對(duì)于左對(duì)齊,右對(duì)齊和中心對(duì)齊,可以使用與網(wǎng)格系統(tǒng)使用相同視口寬度斷點(diǎn)的響應(yīng)類。
<p class="text-left">Left aligned text on all viewport sizes.</p><p class="text-center">Center aligned text on all viewport sizes.</p><p class="text-right">Right aligned text on all viewport sizes.</p><p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p><p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p><p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p><p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
防止文本與.text-nowrap
類一起打包。
<div class="row"> <div class="col-1 text-nowrap"> Curabitur blandit tempus ardua ridiculus sed magna. </div> <div class="col-11"> <img src="..." alt="An image to show the text doesn't wrap"> </div></div>
對(duì)于更長的內(nèi)容,您可以添加一個(gè).text-truncate
類以省略號(hào)截?cái)辔谋尽?strong>需要display: inline-block
或display: block
**.**。
<!-- Block level --><div class="row"> <div class="col-2 text-truncate"> Praeterea iter est quasdam res quas ex communi. </div></div><!-- Inline level --><span class="d-inline-block text-truncate" style="max-width: 150px;"> Praeterea iter est quasdam res quas ex communi.</span>
使用文本大寫類轉(zhuǎn)換組件中的文本。
<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">CapiTaliZed text.</p>
請(qǐng)注意,text-capitalize
只更改每個(gè)單詞的第一個(gè)字母,使其他字母的大小寫不受影響。
快速更改文字的粗細(xì)或斜體文字。
<p class="font-weight-bold">Bold text.</p><p class="font-weight-normal">Normal weight text.</p><p class="font-weight-light">Light weight text.</p><p class="font-italic">Italic text.</p>