?
This document uses PHP Chinese website manual Release
常見文本工具的文檔和示例,以控制對齊,包裝,重量等等。
輕松地將文本重新對齊到具有文本對齊類的組件。
<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>
對于左對齊,右對齊和中心對齊,可以使用與網(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>
對于更長的內(nèi)容,您可以添加一個(gè).text-truncate
類以省略號截?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>
請注意,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>