작품 소개에 긴 [[하이퍼링크]]를 넣었더니 글 상자 밖으로 튀어나오는 경우가 있다. [[CSS]]의 `overflow-wrap: anywhere`는 끊을 곳 없는 긴 문자열을 필요한 지점에서 접어준다.

1. 아래 예를 `link-wrap.html`로 저장해 웹 브라우저에서 연다.
2. 주소가 상자 너비 안에서 여러 줄로 나뉘는지 본다.
3. 스타일의 `overflow-wrap: anywhere`를 잠깐 지워 결과를 비교한다.

```html
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<title>길지만 접히는 주소</title>
<style>.credit { max-width: 18rem; overflow-wrap: anywhere; }</style>
<p class="credit"><a href="https://example.com/abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz">https://example.com/abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz</a></p>
</html>
```

예제의 주소는 배치 확인용이다. 줄을 접어도 `href`의 주소는 바뀌지 않는다. [[링크에 이름 붙이기]]와 함께 [[출처 주소를 읽기 좋게 놓기]]를 생각해보자. 주소가 길다고 지면을 더 많이 소유할 권리가 생기지는 않는다.

참고: [MDN의 overflow-wrap 안내](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-wrap)

## 기타 등등

- 이 속성은 마이크로소프트의 비표준 확장 `word-wrap`에서 출발했다. 지금도 그 옛 이름을 별칭으로 사용할 수 있다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-wrap)
- `anywhere`와 `break-word`는 비슷하게 줄을 접어도 최소 콘텐츠 크기를 계산하는 방식이 다르다. 같은 긴 주소가 그리드나 플렉스 상자의 너비에 다른 영향을 줄 수 있다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-wrap)

#사소한기술