티스토리 블로그 휴대폰으로 볼 때 글 하단에 관련글 제목 잘림 해결방법

안녕하세요^^

블로그 초보인데요. 모르는 게 많아서 이것저것 알아가면서 하다 보니 시간도 많이 걸리고 힘도 드네요.

얼마 전 블로그를 살펴보다가 블로그 글 하단에 표시되는 관련글의 제목이 '...' 으로 잘려 있는 것을 발견하였어요.

그래서 검색해서 찾아보니 해결책을 찾아서 PC 블로그에 설정했고, 제목이 온전히 다 보여서 흐뭇하였어요.

근데, 휴대폰으로 관련글을 보니 적용되지 않고 제목이 뚝 잘려서 보이지 않는 거예요.

바로 이렇게 뚝 잘려서 뭔 내용인지 모르겠고 보기에도 별로였어요.

이게 주로 사용 중인 티스토리 스킨의 CSS(스타일 시트) 설정 때문에 발생한다고 합니다. 모바일 화면의 제한된 공간에 텍스트를 깔끔하게 표시하기 위해 의도적으로 제목을 한 줄로 제한하는 코드가 적용되어 있기 때문이라네요.

이걸 해결하려고 검색해 봐도 답이 없고, 며칠을 고생했는데 드디어 해결 방법을 알았아요.

제가 사용하는 스킨은 북클럽입니다. 먼저, 티스토리 관리를 클릭하면 블로그 관리 페이지가 나옵니다.

1. 왼쪽 메뉴에서 꾸미기 > 스킨 편집을 클릭합니다.

2. 오른쪽의 스킨 편집 화면에서 html 편집 버튼을 누른 후, 상단의 CSS 탭을 선택합니다.

3. .related-articles ul li .title 이라고 적혀 있는 것을 찾습니다.

4. height: 2.8em; 이라고 되어 있는 부분을 → height: 5.6em; 으로 바꾸고 (숫자 부분만 바꾸면 됩니다)

5. -webkit-line-clamp: 2; 라고 되어 있는 부분을 → -webkit-line-clamp: 4; 로 바꾸면 됩니다. (역시 숫자만)

숫자 부분이 바뀐 거 보이시죠. 저는 4줄로 설정했어요.

★ height 는 높이를 말하는데 보통 1.4em 이 한 줄의 높이라고 합니다.

★ -webkit-line-clamp: 4; 는 제목 줄 수를 가리킵니다. 그래서 1.4 * 4 = 5.6em 이 됩니다.

줄 수를 늘리면 높이도 같이 늘려줘야 된다고 해요 그렇지 않으면 레이아웃이 어색해질 수 있다고 합니다.

오른쪽 적용 버튼을 누르고 왼쪽 화살표를 눌러서 스킨 편집 화면으로 돌아가면 됩니다.

그리고 다시 휴대폰 화면으로 관련글을 보면 됩니다.

바뀐 모습입니다. 그런데 제목이 처음보다는 많이 보이기는 한데 여전히 끝까지 다 보이지가 않아서 다시 설정을 해야 했어요.

◆ 줄 수 제한 없이 전체 제목을 다 보여주고 싶을 때

아예 제목이 잘리지 않고 전체가 다 보이게 하려면, 여러 줄 제한에 관련된 코드들을 모두 삭제하고 높이를 자동으로 설정하면 됩니다.

1. 다시 아까 CSS 화면으로 가서 왼쪽번호 3462 를 찾습니다.

2. 빨간 네모 안에 있는 3줄 지우면 됩니다. vertical; 뒤에 커서가 오게 해서 차례로 천천히 지우면 됩니다.

3. 지운 화면입니다. height: 에 숫자를 지우고 auto 를 입력하고, white-space: 에 nowrap 으로 되어 있다면 normal

로 바꾸면 됩니다.

4. 상단에 적용 버튼 누르고 왼쪽 화살표 눌러서 스킨 편집 화면으로 돌아옵니다.

다시 휴대폰에서 관련글을 확인해 보니 이제 제목 글자가 다 보이네요.

모쪼록 유용한 정보가 되었기를 바랍니다.

오늘안되면내일