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

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

<!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 안내

기타 등등

• 이 속성은 마이크로소프트의 비표준 확장 word-wrap에서 출발했다. 지금도 그 옛 이름을 별칭으로 사용할 수 있다. 출처
• anywhere와 break-word는 비슷하게 줄을 접어도 최소 콘텐츠 크기를 계산하는 방식이 다르다. 같은 긴 주소가 그리드나 플렉스 상자의 너비에 다른 영향을 줄 수 있다. 출처

#사소한기술