퓨어갤러리 리스트 제목이 전부 나오게 하려면?

밑에 내용에 이어서 질문합니다.

퓨어갤러리의 리스트 글 제목이 전체가 나타나질 않고 일부분만 나타나고 있습니다.

리스트 글 제목을 모두 표현하고 싶을땐 어떻게 해야하나요?

그리고 글 제목 폰트를 굵게 더 키우고 싶습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    제목은 내용을 추측할 수 있도록 최대한 구체적으로 작성 부탁드립니다.

     

    KBoard 퓨어 갤러리 스킨 게시글 목록 페이지에서

    제목을 자르지 않고 모두 표시하고 제목 글자 크기를 굵게 하시려면

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보세요.

    #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title { height: auto; font-weight: bold; }
    #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title .kboard-pure-gallery-cut-strings { white-space: normal; }

    위의 코드를 적용하시면 게시글의 제목이 모두 표시되지만

    게시글마다 제목의 길이가 다르기 때문에 레이아웃이 깨질 수도 있습니다.

    아래의 코드로 교체하시면 5줄로 표시하실 수 있습니다.

    #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title { display: -webkit-box; line-height: 20px; height: 100px; text-overflow: ellipsis; -webkit-line-clamp: 5; -webkit-box-orient: vertical; word-wrap: break-word; white-space: normal; font-weight: bold; }
    #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title .kboard-pure-gallery-cut-strings { white-space: inherit; }

    3줄로 표시하시려면 height 값을 60px로 설정하시고

    -webkit-line-clamp 속성을 3으로 설정해보시겠어요?

    고맙습니다.

  • 감사합니다 수정했어요

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기