HTML <wbr> 요소는 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.
<div id="example-paragraphs">
<p>Fernstraßenbauprivatfinanzierungsgesetz</p>
<p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
<p>Fernstraßen­bau­privat­finanzierungs­gesetz</p>
</div>
#example-paragraphs {
background-color: white;
overflow: hidden;
resize: horizontal;
width: 9rem;
border: 2px dashed #999;
}
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |
특성
이 요소는 전역 특성만 포함합니다.
참고
UTF-8 인코딩을 사용한 페이지의 <wbr> 은 U+200B ZERO-WIDTH SPACE 코드 포인트처럼 동작합니다. 특히, Unicode bidi BN 코드 포인트처럼 행동하므로 bidi 정렬의 영향을 받지 않습니다. 즉 <div dir=rtl>123,<wbr>456</div>의 줄이 바뀌지 않은 경우, 456,123이 아니라 123,456으로 나타납니다.
같은 이유로 인해 < wbr > 요소로 인한 줄바꿈으로는 붙임표가 나타나지 않습니다. 줄의 끝에 하이픈이 필요한 경우 소프트 하이픈 문자 개체(soft hyphen character entity, & shy;)를 사용하세요.
<wbr>은 Internet Explorer 5.5에서 처음 구현됐고, HTML5가 정식으로 정의했습니다.
예제
URL의 줄을 바꿀 때, 문장 부호 다음에 잘린 경우 독자가 URL이 끝난 것으로 혼동할 수 있으므로, *The Yahoo Style Guide*는 URL의 줄바꿈을 문장 부호 이전에 하라고 추천합니다.
<p>
http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
같이 보기
overflow-wrapword-breakhyphens<br>요소