티스토리 북클럽 모바일 제목 안짤리는법

티스토리 블로그 글을 작성하다 보면 한 번씩 제목이 긴 글을 쓸 때도 있습니다. PC에서 글을 작성할 때는 모르다가 모바일에서 해당 글을 봤을 때 제목이 잘려서 점으로 표시되면 많이 당혹스러운데 이럴 경우 제목을 보고 무슨 말을 하려고 하는 건지 잘 전달이 안될 수 있어 수정이 필요합니다.

티스토리 북클럽 모바일 제목 잘리는 현상

제목이 잘리는 경우는 크게 2가지로 모바일에서 해당 글을 볼 때 상단의 제목이 잘려서 나오는 경우와 글목록에서 제목이 잘리는 경우로 각각의 수정 방법이 다르니 하나씩 변경해 보도록 하겠습니다. 저는 현재 북클럽 스킨에서 리스트 타입을 북리뷰에서 뉴북으로 변경해서 사용하고 있으니 참고하시기 바랍니다.

그리고 PC에서 글을 작성할 때는 글쓰기 창의 모바일 미리 보기를 통해서 알 수 있지만 글을 발행하고 나서는 아래와 같이 확인해 보시기 바랍니다. 크롬 브라우저 기준으로 블로글 글을 여시고 F12키를 눌러보시면 오른쪽에 위와 같은 화면이 나옵니다.

여기에서 화살표로 표시된 부분을 누르시면 해당창이 모바일기기에 맞춰서 화면 크기가 바뀌게 됩니다. 혹시 모르시는 분이 계시면 한번 확인해 보시기 바랍니다.

1. 포스팅의 글 제목이 잘려 보일 경우

먼저 글의 제목이 잘려서 보일 때 수정 하는 방법입니다. 스킨편집-html편집-CSS탭으로 이동하셔서 post-cover .inner을 찾으시면 2921번대에 webkit-line-clamp 가 나옵니다. 기존에 있는 숫자 2는 2줄을 의미하는데 이를 3으로 바꿔 보도록 하겠습니다.

적용과 새로고침을 하시고 다시 모바일 화면에서 확인해 보시면 제목이 기존 2줄에서 3줄로 바뀌면서 잘리지 않고 나오는 것을 확인할 수 있습니다.

수정 완료후 제목 길이 비교

2. 글목록에서 글 제목이 잘려 보이는 현상

글목록에서 글 제목이 잘려 보일 때에 아래와 같이 수정해 보시기 바랍니다. CSS탭에서 .post-item .title 항목을 찾아 주시면 1171번대에 white-space: nowrap의 nowrap을 nomal로 수정하고 적용과 새로고침을 해보시기 바랍니다. 아래 비교 사진에서 볼 수 있듯이 제목이 두줄로 나오면서 잘리지 않게 나오게 되었습니다.