[티스토리 블로그 스킨 수정] 본문의 긴 파일 주소나 URL 주소가 짤릴때

티스토리 스킨은 모던 베이직(Modern Basic)이라는 스킨을 사용하고 있다.

본문 내에 그림이나 다른 텍스트들은 모두 정상적으로 줄바꿈(wrap)이 되는데 긴 url 주소나 긴 파일경로 주소는 줄바꾸기가 되지않고 짤린다.

혹시 그런 스킨을 사용하고 있다면 CSS 편집에 들어가서 #content { ... } 안에   word-wrap:break-word;  를 추가해주면 된다.

△ 위와 같이 긴 url 주소와 윈도우 파일 경로 주소가 짤려서 나옴.

△ css 편집기에서 #content {  } 안에  word-wrap:break-word;  을 입력하고 저장하면 아래 사진과 같이 정상적으로 출력됨. (다른 스킨들은 저 코드가 다 있는거 같음..ㅡㅡ;)

 word-wrap:break-word; 는 css3 버전에 새롭게 추가된 기능이라고 한다. 자신의 스킨이 css3일때만 가능함.

블로그에서 위와 같은 긴 주소의 줄바꾸기(wrapping)가 안되면 블로그 스킨의 문제거나 지원하는 웹브라우저의 문제라고 한다.

구버전 인터넷익스플로러(IE5,6,7,8), 오페라, 크롬, 사파리, 파이어폭스 등에 따라서도 달라질수도 있다고 함. 하여간 가능한 css 코드를 대충 아래에 추가함.

  /* 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;

Wrapping a long url with CSS

a {

word-wrap: break-word;

}

Works for a long text too:

p {

word-wrap: break-word;

}

Tested in IE6, IE7, Firefox, Safari, Chrome

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap !important; /* Mozilla */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* IE 5.5+ */

-ms-word-break: break-all;

     word-break: break-all;

 word-wrap:break-word;

     // Non standard for webkit

     word-break: break-word;

-webkit-hyphens: auto;

   -moz-hyphens: auto;

        hyphens: auto;

The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

▪ 결과물 링크 : http://jsfiddle.net/JoseFaeti/Fqbgu/