텍스트
정렬, 줄 바꿈, 무게 등을 제어하는 일반적인 텍스트 유틸리티에 대한 문서 및 예제.
텍스트 정렬
텍스트 정렬 클래스를 사용하여 텍스트를 구성요소에 쉽게 재정렬합니다.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. 공공의 의무를 다해야 합니다. no hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
<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>왼쪽, 오른쪽 및 중앙 정렬의 경우 그리드 시스템과 동일한 뷰포트 너비 중단점을 사용하는 반응형 클래스를 사용할 수 있습니다.
모든 뷰포트 크기에서 왼쪽 정렬된 텍스트입니다.
모든 뷰포트 크기에서 가운데 정렬된 텍스트.
모든 뷰포트 크기에서 오른쪽 정렬된 텍스트.
SM(작음) 또는 더 넓은 크기의 뷰포트에서 왼쪽 정렬된 텍스트입니다.
크기가 MD(중간) 이상인 뷰포트의 왼쪽 정렬된 텍스트입니다.
뷰포트 크기가 LG(대형) 이상인 왼쪽 정렬된 텍스트입니다.
XL(초대형) 또는 더 넓은 크기의 뷰포트에서 왼쪽 정렬된 텍스트입니다.
<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-wrap클래스 로 텍스트를 줄바꿈합니다 .
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>텍스트가 .text-nowrap클래스로 줄바꿈되지 않도록 합니다.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>더 긴 콘텐츠 .text-truncate의 경우 줄임표로 텍스트를 자르는 클래스를 추가할 수 있습니다. 또는 가 필요합니다 .display: inline-blockdisplay: 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>단어 나누기
.text-breakto set 을 사용하여 overflow-wrap: break-word( word-break: break-wordIE 및 Edge 호환성을 위해) 긴 텍스트 문자열이 구성 요소의 레이아웃을 깨뜨리는 것을 방지합니다 .
ㅋㅋㅋㅋㅋㅋㅋㅋ
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>텍스트 변환
텍스트 대문자 클래스를 사용하여 구성 요소의 텍스트를 변환합니다.
소문자 텍스트.
대문자 텍스트.
대문자로 된 텍스트.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>.text-capitalize각 단어의 첫 글자만 변경하고 다른 글자의 대소문자는 영향을 받지 않는 방법에 유의하십시오 .
글꼴 두께 및 기울임꼴
텍스트의 두께(굵기)를 빠르게 변경하거나 텍스트를 기울임꼴로 표시합니다.
굵은 텍스트.
더 굵은 텍스트(상위 요소에 상대적).
일반 무게 텍스트입니다.
가벼운 텍스트.
더 가벼운 무게의 텍스트(상위 요소에 비해).
기울임꼴 텍스트.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>모노스페이스
를 사용하여 선택 영역을 고정 폭 글꼴 스택으로 변경합니다 .text-monospace.
이것은 모노스페이스에서
<p class="text-monospace">This is in monospace</p>색상 재설정
.text-reset상위 항목에서 색상을 상속하도록 텍스트 또는 링크의 색상을 재설정하십시오 .
재설정 링크 가 있는 음소거된 텍스트
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>텍스트 장식
.text-decoration-none클래스 로 텍스트 장식을 제거하십시오 .
<a href="#" class="text-decoration-none">Non-underlined link</a>