CSS를 사용하여 긴 URL / 긴 문자 강제 줄바꿈

워드프레스 정보를 제공하는 블로그 Avada 2018. 12. 26. 00:30 • 댓글:

티스토리 블로그나 워드프레스에서 긴 URL을 본문에 붙여넣기 하면 라인을 벗어나서 표시될 수 있습니다.

본문 영역을 벗어나는 긴 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 부분이 본문 너비에 맞게 강제로 줄바꿈되어 표시됩니다.

긴 URL 강제 줄바꿈

참고: