오디세이 스킨 편집: 포스터 타입에서 모바일 타이틀 2줄로 변경하기

모바일 환경에서 타이틀이 너무 짧게 나오는 경우 해결

스킨편집 👉 기본설정 👉 기본 목록 스타일 👉 포스터 타입을 설정하면 모바일 환경에 경우 2개의 칼럼으로 포스팅된 글이 표현되는데요. 칼럼이 2개다 보니 가로폭이 짧아 타이틀이 너무 조금 출력되는 게 마음에 걸렸습니다.

 

데스크톱 환경의 경우에도 타이틀이 2줄에서 말 줄임표 처리가 되는데 모바일 환경에서는 1줄에서 말줄임 처리가 되었거든요.

 

(좌)기존 모바일화면, (우)변경한 모바일 화면

 

모바일 환경에서 타이틀 2줄로 변경하기

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
    .article-type-common .title {
        max-height: 48px;
        margin-bottom: 7px;
        font-size: 21px;
        font-weight: 400;
        -webkit-line-clamp: 1;
    }

    .article-type-common .summary {
        margin-bottom: 7px;
    }
}

스킨편집 👉 HTML 편집 👉 CSS 탭에서 위와 같은 부분을 찾을 수 있고 -webkit-line-clamp: 1; 에서 값을 2로만 변경하면 2줄로 쉽게 변경이 가능하고 원한다면 3줄로도 표현할 수 있습니다.

 

간단한 부분이지만 CSS의 어느 속성이 글을 몇줄까지 표현하고 말줄임표 처리하는지 몰라서 조금 헤매었는데요. webkit-line-clamp 였다는 것을 기록해 놓기로 합니다.