とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > テキスト

両端揃え

.text-justify は、単語間に適度なスペースを入れることにより、行の両端を揃えます。

Sample
The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators...
The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators...
Sample
<div class="border text-justify">The World Wide Web ...</div>
<div class="border">The World Wide Web ...</div> 

左寄せ、中央寄せ、右寄せ

.text-left, .text-center, .text-right はそれぞれ、テキストを左寄せ、中央寄せ、右寄せします。

Sample
左寄せ
中央寄せ
右寄せ
Code
<div class="text-left">左寄せ</div>
<div class="text-center">中央寄せ</div>
<div class="text-right">右寄せ</div>

.text-{sm|md|lg|xl}-{left|center|right} の形式は、それぞれ、SM(Small)サイズ以上、MD(Medium)サイズ以上、LG(Large)サイズ以上、XL(Extra Large)サイズ以上の時のみ、左寄せ、中央寄せ、右寄せします。

Code
<div class="text-sm-left">左寄せ(SM以上の時)</div>
<div class="text-sm-center">中央寄せ(SM以上の時)</div>
<div class="text-sm-right">右寄せ(SM以上の時)</div>

改行無し

.text-nowrap はテキストの自動改行を禁止します。.text-wrap は自動改行を許可します。

Sample
The World Wide Web (abbreviated WWW or the Web) is ...
The World Wide Web (abbreviated WWW or the Web) is ...
Code
<div class="border">The World Wide Web (abbreviated WWW or the Web) is ...</div>
<div class="border text-nowrap">The World Wide Web (abbreviated WWW or the Web) is ...</div>

切り詰め

.text-truncate ははみ出すテキストを切り詰め、代わりに ... を表示します。要素には .d-block (display:block) または .d-inline-block (display:inline-block) を指定しておく必要があります。

Sample
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
Code
<div class="d-block">Hypertext Markup Language (HTML) is ...</div>
<div class="d-block text-truncate">Hypertext Markup Language (HTML) is ...</div>

大文字化・小文字化

.text-lowercase はテキスト全体を小文字に、.text-uppercase は大文字に、.text-capitalize は各単語の先頭文字を大文字に変換して表示します。

Sample
Lowercased text.
Uppercased text.
Capitalized text.
Code
<div class="text-lowercase">Lowercased text.</div>
<div class="text-uppercase">Uppercased text.</div>
<div class="text-capitalize">Capitalized text.</div>

文字の太さとイタリック体

.font-weight-{ bold | bolder | normal | light | lighter } はフォントの太さを太字、通常、細字にします。.font-italic はフォントをイタリック体にします。

Sample
This text is bold.
This text is bolder.
This text is normal.
This text is light.
This text is lighter.
This text is italic.
Code
<div class="font-weight-bold">This text is bold.</div>
<div class="font-weight-bolder">This text is bolder.</div>
<div class="font-weight-normal">This text is normal.</div>
<div class="font-weight-light">This text is light.</div>
<div class="font-weight-lighter">This text is lighter.</div>
<div class="font-italic">This text is italic.</div>

等幅フォント

.text-monospace は、モノスペース(等幅)フォントを指定します。

Sample
This is not monospace text.
This is monospace text.
Code
<div class="d-block">This is not monospace text.</div>
<div class="d-block text-monospace">This is monospace text.</div>

リセット

.text-reset は、テキストの色をリセットします。

Sample

Muted text with a reset link.

Code
<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

装飾無し

.text-decoration-none は、テキストの装飾をなくします。

Sample
Code
<a href="#" class="text-decoration-none">Link without underline</a>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月13日
http://www.tohoho-web.com/bootstrap/text.html