티스토리 북클럽 스킨, 모바일 글 제목 잘림 문제 해결

티스토리 북 클럽(Book Club) 스킨 사용 시, 모바일에서 글 제목이 잘리는 현상이 있는데, CSS 편집에서 간단히 해결하는 방법을 알아봅니다.

1. 모바일에서 포스팅 '글 제목' 잘림 현상
2. 모바일 글 목록에서 '제목' 잘림 문제 해결하기

 

 

1. 모바일에서 글 제목 잘리는 문제 해결 방법

1) 티스토리 관리 → 스킨 편집 → HTML 편집으로 이동. ▼

 

(그림 1) 티스토리 HTML 편집 화면

 

2) CSS → '.post-cover.inner > h1' 코드에서 'line-clamp'의 숫자를 변경합니다. ▼

※ 기본 세팅은 '2'로 되어 있으며, 숫자 '2'는 2줄을 의미('3'은 3줄).

(그림 2) CSS line-clamp 편집

 

3) 제목 잘림 문제 해결 확인 (예시) ▼

※ 숫자가 '2'였을 때는 제목이 2줄만 표시되었지만, '4'로 변경 후 잘리지 않고 표시됨을 확인할 수 있습니다.

(그림 3) 수정된 모바일 화면 확인

 

 

2. 모바일 포스팅 글 목록에서 제목 잘리는 문제 해결 방법

1) 티스토리 CSS 편집 → '.post-item .title' 코드에서 'white-space: nowrap;' 부분 삭제 후, 아래의 코드 3줄을 입력합니다. ▼

※ 마찬가지로 '숫자'는 줄 수를 뜻함.

display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
}

 

(그림 4) CSS 코드 입력

 

2) 모바일 글 목록 화면에서, 제목이 다 보이지 않는 문제가 해결된 예시 화면. ▼

(그림 5) 수정 전,후 모바일 글 목록 비교 화면

 

 

대표 썸네일 사진