[typography] BS5 - .text-break 클래스 - 긴 텍스트에 의한 레이아웃 깨짐 방지 (= .text-break클래스 = 텍스트브레이크클래스) ※ 단어깨기

1. .text-break 예제 - 긴 텍스트가 레이아웃 이탈하는 걸 방지
2. .text-break 정의

.text-break 예제 - 긴 텍스트가 레이아웃 이탈하는 걸 방지

<div class="container mt-3 border">

  <p class="text-break">홈짱닷컴: ABCDEFGHIJKLMNOPQRSTUWWXYZ</p>

  <p>홈짱닷컴: ABCDEFGHIJKLMNOPQRSTUWWXYZ</p>

</div>

 

결과보기

.text-break 정의

 

긴 영문단어 텍스트를 깨서 줄바꿈 시켜, 레이아웃 벗어나는 걸 방지.

 

---

[정의]

 

.text-break {

  word-wrap: break-word !important;

  word-break: break-word !important;

}