티스토리 블로그나 워드프레스에서 긴 URL을 본문에 붙여넣기 하면 라인을 벗어나서 표시될 수 있습니다.
CSS를 사용하여 긴 URL / 긴 문자 강제 줄바꿈 (단어가 영역을 벗어나는 경우)
위의 그림과 같이 URL이 본문 영역을 벗어나서 보기가 좋지 않습니다. 이 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.
.skin_view .area_view {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
// 출처: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/티스토리의 기본 스킨 중 하나인 #1을 사용하는 경우 위의 코드를 추가하면 정상적으로 작동합니다. 상황에 따라 요소명을 적절히 변경하여 위의 코드를 적용해보시기 바랍니다.
그러면 다음과 같이 긴 URL 부분이 본문 너비에 맞게 강제로 줄바꿈되어 표시됩니다.
