wbr 요소

정의

word break(line-break opportunity); wbr 요소는 br 요소가 강제로 줄바꿈을 처리하는 것과 달리 부모 요소의 너비에 따라 동적으로 줄바꿈을 처리해 줍니다.

마크업 규칙

Flow Interactive Metadata Phrasing Embedded Heading Sectioning

  • 플로우 컨텐츠이면서 구문 컨텐츠에 속합니다.
  • 자식 요소가 없는 빈 요소입니다.
  • '​’, ‘­‘와 같은 엔티티 문자열로 대체하여 사용할 수 있습니다.

기본 문법은 다음과 같습니다. 데모

<p>네티즌은 "좋은 사람과의 만남은 언제나 행복합니다. <wbr>얼마전<wbr>새롭게<wbr>1박2일에<wbr>합류한<wbr>엄태웅씨를<wbr>만날<wbr>일이 있었습니다.</p>

엔티티 문자열로 처리하는 방법

wbr 요소는 HTML5에서 명세에 정식으로 포함된 것으로 이전까지는 비표준 요소였습니다. 하지만 IE를 포함한 브라우저 대부분이 지원했습니다. 그럼에도 몇몇 브라우저는 문제가 있었습니다. 특히 IE8 표준 모드와 윈도우용 Safari 3이하, Opera 8이하에서 지원되지 않거나 버그가 있습니다. wbr 요소에 대한 브라우저별 호환성과 엔티티 문자열을 이용하는 방법은 Quirksmode.org에 소개되어 있는데 다음과 같습니다.

&#8203;으로 마크업

<p>So then he pointed at the tiger and screamed
"there&#8203;is&#8203;no&#8203;way&#8203;you&#8203;are&#8203;ever&#8203;going&#8203;to&#8203;catch&#8203;me"!</p>

&#8203;는 zero-width space라고 하는데 IE7 이상과 Firefox, Opera, Safari, Chrome 등에서 잘 작동합니다. 하지만 IE6 이하에서는 장식용 문자를 올바르게 처리하지 못하는 버그가 있습니다.

&shy;으로 마크업

<p>So then he pointed at the tiger and screamed
"there&shy;is&shy;no&shy;way&shy;you&shy;are&shy;ever&shy;going&shy;to&shy;catch&shy;me"!</p>

&shy;는 샤이 하이픈(shy hyphen)으로 IE에서는 모든 버전에서 문제없이 작동합니다. 심지어 이름처럼 줄내림된 부분에 하이픈(-)을 표시해주기까지 합니다. 하지만 Firefox2 이하에서는 제대로 동작하지 않습니다.

CSS로 wbr 미지원 브라우저 대응하기

윈도우용 Safari 3와 오래된 Opera(8 이하)에서 wbr 요소를 지원하지 못하는 문제가 있는데 CSS로 처리할 수 있습니다. 엔티티 문자열 &8203;의 CSS 이스케이프 문자열은 '\00200B'로 :after 수도 엘리먼트pseudo-elements를 이용해 wbr 요소 뒤에 추가하는 방법입니다.

wbr:after {
  content: "\00200B"
}

이상과 같은 여러가지 방법이 알려져 있습니다. 사실 Firefox, Safari, Opera, Chrome 등은 구버전의 사용율이 낮기 때문에 IE8 표준 모드에서 wbr 요소를 지원하지 않는 문제만을 제외하면 직접 사용해도 될 것입니다.

IE8 표준 모드에서 wbr 요소 대응하기

IE는 7까지 비표준으로 wbr을 지원해 왔으나 공교롭게 IE8에서 표준이 아니라는 이유로 wbr 요소를 제거했습니다. 때문에 IE8 표준 모드에서는 wbr 요소가 작동하지 않습니다. IE8에서 wbr 요소와 같은 기능을 구현하기 위한 방법은 다음과 같습니다.

  • IE8에서 IE7 호환모드를 사용하거나 쿽스 모드를 사용합니다.
  • wbr 요소 뒤에 빈 요소를 추가하여 CSS를 통해 '\00200B' 이스케이프 문자열을 추가합니다. IE8 표준모드는 wbr 요소를 인식하지 않기때문에 wbr 요소에 직접 수도 엘리먼트를 지정해도 동작하지 않습니다.
<p>So then he pointed at the tiger and screamed
"there<wbr><span class="wbr"></span>is<wbr><span class="wbr"></span>no<wbr><span class="wbr"></span>way<wbr><span class="wbr"></span>you<wbr><span class="wbr"></span>are<wbr><span class="wbr"></span>ever<wbr><span class="wbr"></span>going<wbr><span class="wbr"></span>to<wbr><span class="wbr"></span>catch<wbr><span class="wbr"></span>me"!</p>
.wbr:after {
  content: "\00200B"
}

속성

속성명 설명
전역 속성 공통 속성

메모

HTML4/XHTML1과의 차이점, 접근성, 보충 내용 그리고 편집자 의견 등을 포함하고 있습니다.

  • HTML5에서 추가된 요소입니다. 하지만 이전에도 IE, Firefox, Konqueror 등에서 제공되어 사용할 수 있었습니다.
  • 한글이나 일어와 같은 2byte 문자열은 처리하지 못합니다.
  • 시작/종료 태그 생략 정보는 명세 8.1.2.4 선택적 태그의 주석을 참조해 주세요.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.

관련 요소

 
html5/element/wbr.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki