HTML <wbr> 요소는 브라우저가 현재 요소의 줄바꿈 규칙을 무시하고 줄을 바꿀 수 있는 위치를 나타냅니다.

불러오는 중...

<div class="background">
  <div class="resizable">
    <p>크기를 조절해보세요.</p>
    <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
    <p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
    <p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p>
  </div>
</div>

특성

전역 특성만 포함합니다.

사용 일람

UTF-8 인코딩을 사용한 페이지의 <wbr>U+200B ZERO-WIDTH SPACE 코드 포인트처럼 동작합니다. 특히, 유니코드 BiDi BN 코드 포인트처럼 행동하므로 BiDi 정렬의 영향을 받지 않습니다. 즉 <div dir=rtl>123,<wbr>456</div>의 줄이 바뀌지 않은 경우, 456,123이 아니라 123,456으로 나타납니다.

같은 이유로 인해 <wbr> 요소로 인한 줄바꿈으로는 붙임표(하이픈)가 나타나지 않습니다. 줄의 끝에 붙임표가 필요한 경우 <wbr> 대신 소프트 하이픈 문자 개체(&shy;)를 사용하세요.

예제

엄청나게 긴 URL

URL의 줄을 바꿀 때, 줄바꿈이 문장 부호 다음에 발생하는 경우 URL이 끝난 것으로 오해할 수 있습니다. 그러므로 <wbr>/ 앞에 배치한 것을 확인할 수 있습니다.

<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>
실행 결과

불러오는 중...

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefox
5.5 ~ 779141
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
?지원지원4지원
MDN BCD에서 가져오는 데이터입니다.

같이 보기

  • 줄바꿈 요소 <br>

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)