wbr 태그

태그 wbr는 브라우저가 필요한 경우 (텍스트가 요소의 너비에 맞지 않을 때) 줄바꿈을 할 수 있는 위치를 지정합니다. 이런 줄바꿈을 소프트 줄바꿈이라고 합니다.

닫는 태그가 필요하지 않습니다.

태그 wbr를 통한 단어 줄바꿈 시에는 하이픈 "-"이 추가되지 않습니다. 필요한 경우 소프트 하이픈 문자 를 사용하세요 (끝에 세미콜론은 필수입니다. 오타가 아닙니다).

소프트 하이픈 는 브라우저에게 필요한 경우 단어를 줄바꿈할 수 있는 위치를 지정하며, 이때 하이픈 "-" 기호를 표시합니다.

속성 hyphens의 값이 none로 설정된 경우 소프트 하이픈 는 작동하지 않습니다 (반면 wbr 줄바꿈은 작동합니다).

예제 . 줄바꿈 없는 텍스트

블록 경계를 벗어나는 긴 단어가 있는 텍스트 샘플을 살펴보겠습니다. 블록에 너비를 작게 설정하여 긴 단어가 들어가지 않도록 하겠습니다:

<div id="elem">
	this is supersupersuperlong text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

여기서는 브라우저가 필요한 경우 단어 줄바꿈을 하도록 권장하는 위치에 태그 wbr를 추가해 보겠습니다 (브라우저가 우리가 지정한 모든 위치에서 줄바꿈을 하지는 않는다는 점에 유의하세요):

<div id="elem">
	this is super<wbr>super<wbr>super<wbr>long text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

태그 wbr 대신 문자 를 넣어 봅시다. 줄바꿈 위치에 하이픈이 표시됩니다:

<div id="elem">
	this is supersupersuperlong text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}