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

티스토리 북 클럽(Book Club) 스킨 사용 시 모바일에서 글 제목 잘림 현상이 있는데, Tistory 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) 제목 잘림 문제 해결 확인(예시). ▼

그림3. 수정 전,후 모바일 화면

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

 

 

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. 수정 전,후 모바일 글 목록 화면

HTML과 CSS를 편집하여 내 맘대로 하나씩 바꿔가는 재미가 있는 티스토리, 뿌듯함이 있습니다. 

 

 

대표 썸네일 사진