[티스토리] '오디세이'(Odyssey) 스킨 - 텍스트 영역넘침 해결방법

얼마 전 티스토리에서 새로운 스킨 업데이트가 있었죠!!

바로  '오디세이'(Odyssey) 스킨입니다.

 

notice.tistory.com/2549

신규 스킨 업데이트 안내

 

보자마자 너무 마음에 들어서 바로 스킨 교체를 했는데요.

깔끔한 디자인과 레이아웃이 정말 마음에 들었습니다. 💕

 

그런데 한 가지 문제점을 발견했는데..

텍스트가 콘텐츠영역 밖으로 나가는 현상이 있더라고요.

한글은 괜찮은 거 같은데, 영문이 줄 바꿈이 안되고 계속 나열이 되는 현상이 나타났습니다.

 

 

 

 

- 해결방법 -

 

 

처음으로 F12를 이용해서 해당 영역의 CSS를 살펴봅니다.

 

 

위 파란색 영역에 CSS를 추가해 줄 건데요,

현재 CSS는 아래와 같이 적용되어 있습니다.

.article-view p { 
    margin-bottom: 28px; 
    font-size: 16px; 
    line-height: 26px; 
    color: #555; 
}

위 CSS 에다가 

word-wrap: break-word;

word-break: keep-all;

를 추가해 줄 거예요.

 

word-wrap 은 긴 텍스트를 강제로 자를 것인지에 대한 옵션

word-break는 줄 바꿈을 어떻게 할 것인지에 대한 옵션입니다.

 

**

위 블로그에 word-wrap, word-break의 설명이 간략하게 정리되어 있습니다.

꿀벌개발일지 : ohgyun.com/680

 

위 CSS를 추가해 주기 위해서는 

관리자 페이지의  스킨 편집 > html 편집 > CSS 로 들어가면 됩니다.

 

CSS 편집창에서 Ctrl + F를 이용하여 [ .article-view p ]의 위치를 찾아 아까 추가하려던 CSS를 추가해 줍니다.

그러고 나서 우측 상단의 [적용] 버튼을 클릭하면 끝!

 

 

 

 

다시 돌아와서 화면을 확인해 봅니다.

 

이제 텍스트 영역을 넘지 않고 잘 나오네요 😊

이렇게 간단히 해결하면 기분이 참 좋습니다 ㅎㅎ