티스토리 북클럽 스킨 모바일 글 제목 잘림 현상 해결 방법 (CSS 수정)

티스토리는 모바일에서 글 제목이 잘리는 현상이 있는데, TISTORY 북클럽 스킨 기준 CSS에서 간단한 수정으로 글 제목이 다 보이지 않는 문제를 해결해 보자.

TISTORY 글 제목 잘림 해결하기

1. 발행한 글 선택 시, 제목 잘림 문제 해결 방법.

티스토리 발행 글 제목 잘림 수정 전후 비교

1) 티스토리 관리 → 스킨 편집 → html 편집 → CSS로 이동.

2) CSS 편집 화면에서 Ctrl키+F를 누른 후, post-cover .inner를 검색한다.

- .post-cover .inner > h1 부분, -webkit-line-clamp: 2;에서 숫자를 4로 변경해준다. 기본 셋팅은 2로 되어 있으며 숫자 2는 2줄 3은 3줄을 의미함.

티스토리 CSS 편집 화면 숫자 변경

2. 모바일 발행 글 목록에서 제목 잘림 문제 해결 방법.

티스토리 글 목록 제목 잘림 수정 전후 비교

1) 마찬가지로 post-item .title을 검색한다.

- white-space: nowrap; 부분을 삭제하고, 그 자리에 아래의 코드를 복사해서 넣어준다. 마지막 닫는 }가 중복되지 않게 주의!

CSS


display: -webkit-box;
-webkit-line-clamp: 3; /* 최대 3줄까지 표시 */
-webkit-box-orient: vertical;
overflow: hidden; /* 영역을 벗어나는 텍스트 숨김 */

티스토리 CSS 편집 화면 코드 삭제

티스토리 CSS 편집 화면 코드 입력

마지막으로 적용을 눌러주면 수정 끝.

변경 후, 글 제목이 잘림 없이 보이는 걸 확인할 수 있다.

어렵지 않지?