오디세이 스킨 편집: 포스팅 타이틀 가로폭 수정하기

포스팅 타이틀의 애매한 줄바꿈 고치기 

오디세이 스킨의 기본 설정은 포스팅 타이틀이 width: 780px; 로 잡혀있는데요. 짧은 제목은 상관없지만 긴 제목의 경우 애매한 위치에서 줄바꿈이 되는 듯한 느낌을 줍니다. 사이드바를 노출 설정을 한 영향이 있는 지도 모르겠습니다. 일단은 블로그의 전체 가로폭인 1020px로 수정했습니다.

 

티스토리 스킨편집 👉 HTML 편집 👉 CSS 탭에서 수정

개발자 도구로 확인해 보니 .box-meta 와 .title-article의 max-width가 780px로 잡혀 있어서 둘 다 1020px로 수정해 줍니다.

.article-header .box-meta {
    position: absolute;
    bottom: 56px;
    width: 100%;
    max-width: 1020px;
    z-index: 2;
}

.article-header .title-article {
    display: block;
    width: 100%;
    max-width: 1020px;
    margin: 0 0 33px 0;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: keep-all;
}

 

 

수정 중

수정 후

 

불편하게 줄바꿈이 되었던 타이틀은 해결이 되었습니다. 다만 타이틀이 너무 긴 경우에는 다시 고쳐쓰면서 다듬어야 보기 좋은 타이틀을 만들 수 있겠네요.