1. 정확한 제품 또는 플러그인 이름
screenr 테마의 '최근뉴스' 영역 사용중입니다
2. 상세 내용
가장최근에 올린 글만 갑자기 본문 글이 길게 출력되어 레이아웃을 망치고 있습니다.
포스팅한 글의 문제인가 싶어 아예 새로 작성하여 게시해보았지만 같은 현상이 발생했고
플러그인과 테마 업그레이드를 모두 진행해주어도 변화는 없었습니다.
어떻게 수정하면 좋을지 몰라 도움을 구하게 되었습니다.
참고 이미지 https://imgur.com/a/r9KOoaY
3. 확인 가능한 상세 페이지 주소
www.dangtal.co.kr
안녕하세요~^^
어떤 설정에 의해 텍스트가 줄여지지 않는 듯 합니다.
css로도 텍스트 말줄임을 하실 수 있습니다.
아래의 코드를 참고하여
F12를 눌러 개발자 도구에서
해당 요소의 클래스에 맞게 css를 적용해보시겠어요?
.text { display: -webkit-box; display: -ms-flexbox; display: box; margin-top:1px; max-height:80px; overflow:hidden; vertical-align:top; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient:vertical; -webkit-line-clamp:3 }
-webkit-line-clamp 속성의 3은 3줄까지 표시한다는 의미입니다.
고맙습니다.
답변 감사합니다.
하지만 제가 개발자가 아닌 일반인이다보니 적어주신 코드를 어느 페이지에서 어떻게 삽입해야할지 모르겠습니다.
홈페이지의 메인화면에서 f12를 눌러 주요 키워드를 찾아봐도, 해당 현상이 일어나는 게시글에서 f12를 눌러 찾아봐도
관련 클래스를 찾지못했습니다.
너무 무지한채로 질문드려 송구스럽습니다만 혹시 좀 더 구체적으로 알려주실 수 있으실까요..?
안녕하세요~^^
아래 코드를 복사해서 css를 적용시켜보시겠어요?
.section-news .entry-grid-elements p {
display: -webkit-box;
display: -ms-flexbox;
display: box;
margin-top: 1px;
max-height: 80px;
overflow: hidden;
vertical-align: top;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
고맙습니다.
감사합니다!!
덕분에 이번에도 해결했습니다.
개발 지식이 없는 입장에서 멘땅에 헤딩하듯 나름의 방법을 다 써봐도 안될 때 그 마지막에 항상 이곳에서 도움을 받곤 하는데
번번이 부끄럽고 송구스러운 마음으로 질문드리지만 언제나 명쾌하고 친절하게 답변주셔서 진심으로 감사드립니다.
감사합니다!!