wbr 태그는 줄바꿈 할 위치를 설정할 때 사용합니다.

Reference/HTML

<wbr> 태그는 줄바꿈 할 위치를 설정할 때 사용합니다.

by @webs 2022. 7. 4.

<wbr>

<wbr> 태그는 줄바꿈 할 위치를 설정할 때 사용합니다. <wbr> 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 할 때 사용합니다. 예를 들면 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다. 단어의 줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 word-break 속성을 사용합니다. 줄바꿈을 해주는 <br> 태그와 동일하지만, <wbr> 태그는 줄바꿈을 해야 될 상황에 오면 줄바꿈을 해줍니다.

---

특징	설명
요소	인라인 구조(Inline Element)
닫는 태그	없음
버전	HTML5
시각적 표현	줄바꿈
사용성	★★☆☆☆

정의(Definition)

• <wbr> 태그는 일반적인 한글이나 영어에는 적용되지 않고 의미가 없는 문장에서 사용이 가능합니다.
• <wbr> 태그는 의미가 없는 문장이나 의미적 전달이 안되는 주소에서 줄바꿈을 원할 경우 사용합니다.
• <wbr> 태그는 줄바꿈 할 위치를 설정할 때 사용합니다.
• <wbr> 태그는 단어가 너무 길거나 원하는 곳에서 줄바꿈을 하고 싶을 때 사용합니다.
• 단어의 줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 CSS의 word-break 속성을 사용합니다.

비교(Compare)

• 텍스트 줄바꿈을 원하다면 <br> 태그를 사용합니다.
• 의미가 없는 텍스트 줄바꿈을 원하다면 <wbr> 태그를 사용합니다.
• 텍스트의 줄바꿈을 원하다면 CSS 속성 word-break 속성을 사용합니다.

예제1(Sample)

wbr 태그 적용 여부 확인 예제입니다.

일반적인 한글이나 영어에는 적용되지 않습니다.

일반적인 한글이나 영어에는 적용되지 않습니다.

sdfsdfsdfdsdfsdfxsdfsdfsdfsdfsdf

sdfsdfsdfdsdfsdfxsdfsdfsdfsdfsdf

http://127.0.0.1:5502/webstoryboy/html/wbr.html

http://127.0.0.1:5502/webstoryboy/html/wbr.html

HTML

CSS

SCRIPT

<div class="wbr-box">
    <div>
        <p>일반적인 한글이나 영어에는 적용되지 않습니다.</p>
        <p>일반적인 한글이나<wbr> 영어에는<wbr> 적용되지 않습니다.<wbr></p>
    </div>
    <div>
        <p>sdfsdfsdfdsdfsdfxsdfsdfsdfsdfsdf</p>
        <p>sdfsdfsd<wbr>fdsdfsdf<wbr>xsdfsdfsdfsdfsdf</p>
    </div>
    <div>
        <p>http://127.0.0.1:5502/webstoryboy/html/wbr.html</p>
        <p>http://127.0.0.1:5502/<wbr>webstoryboy<wbr>/html/wbr.html</p>
    </div>
</div>

.wbr-box {
    background-color: white;
    overflow: hidden;
    resize: horizontal;
    border: 2px dashed #999;
    width: 20%;
    padding: 1%;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
<wbr>	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고(Reference)

• https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element

---

HTML

• <a>
• <abbr>
• <acronym>
• <address>
• <applet>