그누보드 최신글 위젯 제목 2줄 설정 가이드

그누보드5 및 나리야(Nariya) 빌더의 기본 최신글 갤러리/웹진 위젯은 제목이 길어질 경우 1줄 뒤에 ...로 잘려 나가 핵심 정보가 모바일 화면에서 누락되는 경우가 많습니다. CSS의 -webkit-line-clamp 속성과 위젯 소스를 간단히 수정하여 제목을 2줄까지 시원하게 노출하고 3줄째부터 깔끔하게 말줄임(...) 처리하는 실전 팁을 정리했습니다.

개발 원문 블로그 참고하기

모바일 반응형 갤러리 최적화 | -webkit-line-clamp 2줄 말줄임 적용 | 그누보드 & 나리야 호환

최신글 2줄 제목 구현 2단계

1단계: nariya.css (또는 style.css) 스타일 추가

사용 중인 테마의 CSS 파일(/nariya/nariya.css 약 211라인 근처)에 아래와 같이 2줄용 클래스(.na-title2, .na-subject2)를 추가합니다:

/* 2줄 전용 제목 컨테이너 (고정 높이 확보) */
.na-title2 { display: block; position: relative; width: 100%; height: 50px; line-height: 22px; padding: 0; }
.na-title2 .na-item2 { display: flex; align-items: center; }

/* 멀티라인 2줄 말줄임 핵심 CSS */
.na-title2 .na-subject2 {
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* 2줄 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

2단계: 위젯 템플릿(widget.rows.php) 적용

사용 중인 위젯 파일(예: /theme/BS4-Basic/widget/wr-gallery/widget.rows.php)의 약 102라인에서 클래스명 뒤에 숫자 2를 붙여 교체합니다:

<div class="na-title2">
  <div class="na-item2">
    <a href="<?php echo $list[$i]['href']; ?>" class="na-subject2">
      <?php echo $list[$i]['subject']; ?>
    </a>
  </div>
</div>

자주 묻는 질문 (FAQ)

Q. 제목이 1줄인 게시글도 높이가 50px로 유지되나요?

네, height: 50px;을 지정하면 제목이 1줄인 카드와 2줄인 카드의 높이가 완벽히 균일하게 맞춰져 갤러리 그리드 행과 열이 어긋나지 않고 정갈하게 정렬됩니다.

Q. 3줄이나 4줄로 늘리고 싶을 때는 어떻게 하나요?

-webkit-line-clamp: 3;으로 변경하고, 행간(line-height: 22px)에 맞춰 height를 70px 내외로 조정해 주시면 원하는 줄 수만큼 자유롭게 확장할 수 있습니다.

Q. 구글 크롬 외에 사파리나 모바일 브라우저에서도 작동하나요?

현재 -webkit-line-clamp 속성은 iOS 사파리, 삼성 인터넷, 크롬, 엣지, 파이어폭스 등 현대의 모든 모바일/데스크톱 브라우저에서 공식 표준으로 지원되므로 완벽히 호환됩니다.