html/css 독학하기

wbr

토픽 html/css 독학하기 > html사전

설명

Introduced in HTML 5

The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

The Word Break Oppurtunity (<wbr>) HTML element는 브라우저에서 경우에 따라 줄바꿈을 해야 할 경우, 문서 내 줄바꿈이 일어날 위치를 지정할 수 있다.  해당위치에 항상 줄바꿈이 일어나게 하는 것은 아니다.(지나치게 의역인것 같습니다)

This element was first implemented in IE5.5 and was officially defined in HTML5.

이 element는 IE5.5에서 처음 구현되었고, HTML5에 공식채택되었다.

Usage Context

Permitted content Empty
Tag omission This is a void element; it must have a start tag, but must not have an end tag.
Permitted parent elements Any element that accepts Phrasing content.
Normative document HTML 5, section 4.6.24

속성

This element has no attributes other than the global attributes.

이 element는 전역속성외에 다른 속성들을 갖지 않는다.

예제

The Yahoo Style Guide recommends breaking a URL before punctuation, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the 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</p> 

Note: The <wbr> element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity (&shy;) instead.

Note: <wbr> element는 줄 바꾸는 시점에 하이픈(-)을 넣지 않는다. 하이픈(-)을 줄 끝에 보이게 하려면, the soft hyphen character entitiy(&shy;)를 사용한다.

DOM Interface

This element implements the HTMLElement interface.

참고

댓글

댓글 본문
  1. engfordev
    수고하셨습니다 ^^
    의견을 살펴보시고, 적절하게 적용부탁 드려요~
    1. 설명 부분..
    저는 마음대로 설명을 써봤어요~
    웹페이지에 긴 단어를 쓰는 경우를 떠올려보자. 긴 단어의 중간에서 줄이 바뀌면 사용자가 이해하기에 불편할 것이다. 이럴 때 끊기지 않아야 하는 단어를 <wbr></wbr>요소로 감싸주면 브라우저는 이 위치에서 줄바꿈을 해야 한다고 판단할 수 있다. <wbr></wbr>요소를 써주지 않으면 브라우저는 긴 단어 중간에서 줄바꿈할 것이다.
    2. 참고부분..
    Note: <wbr></wbr> element는 줄 바꾸는 시점에 하이픈(-)을 넣지 않는다. 하이픈(-)을 줄 끝에 보이게 하려면, the soft hyphen character entitiy(­)를 사용한다.
    무슨 내용인가 했네요 ^^ 웹써핑을 해보니 이런 내용인 것 같네요.
    참고 : <wbr></wbr> 요소를 사용하면, 긴 단어의 중간에서 줄바꿈 해주었을 때 연결해주는 -(하이픈)를 표시해주지 않는다. 단어가 중간에 끊긴 경우에 문장의 끝에 -(하이픈)을 넣어주려면, <wbr></wbr>요소 대신에 줄을 바꿨으면 하는 곳에 ­ 라고 써주면 된다.
    참고한 글 - http://stackoverflow.com/quest...