항목 목록이 너무 깁니다. 어떻게 상태를 감지하고 해결합니까?

우리는 일부 뉴스 항목을 표시하는 고정 크기 div가 있습니다. 우리는 6 개의 뉴스 항목을 표시 한 다음 이어지는 링크를 아카이브에 연결합니다. 뉴스 기사 제목이 모두 한 줄이면 모든 것이 적합합니다. 여러 뉴스 항목의 제목이 높이가 두 줄인 경우 항목 그룹에 더 많은 공간이 필요합니다.항목 목록이 너무 깁니다. 어떻게 상태를 감지하고 해결합니까?

jQuery, CSS 및 HTML을 사용하여 그룹을 div에 맞지 않게하는 뉴스 항목을 표시하거나 표시하지 않도록하려면 어떻게해야합니까? 스크롤 막대는 옵션이 아닙니다. div의 높이와 너비는 일정하고 알 수 있습니다.

뉴스 항목의 구조는 단순히 목록 항목의 목록입니다.

출처

2010-03-03 MedicineMan

:이 질문을 확인, 당신은 elipses를 오버 플로우 조건을 감지하고 추가 할 수 있습니다 : HTTP : //stackoverflow.com/questions/2059743/detect -elements-overflow-using-jquery – nortron

당신은 여분의 데이터를 숨기도록 DIV에 CSS를 설정할 수 있습니다

<div style="overflow: hidden;">

또는 문자 제한 뉴스 항목 제목을 스크립트에서. PHP에서는이 될 것이다 :

<?php echo strlen($article['title']) > 60 ? substr($article['title'], 0, 57) . '...' : $article['title'] ?>

57 자에서 60 자 이상의 어떤 기사 제목을 차단하고 추가 할 그 '...'지속을 표시합니다.

희망이 있습니다.

출처

2010-03-03 23:30:55 nortron

첫 번째 제안은 그 중 일부가 div 제한 내에 있고 div 값이 div 제한을 초과하는 경우 마지막 항목을 반으로 잘라 내고 싶지 않으므로 첫 번째 제안이 작동하지 않습니다. 두 번째 제안은 좋지만 글꼴, 글꼴 크기도 일정하다고 가정합니다. 나는 S.O를 원하고 있습니다. 약간 더 강력한 뭔가를 생각 해낼 수 있습니다 (하지만 여전히 흥미로운 아이디어입니다) – MedicineMan

이 질문을 체크 아웃, 당신은 오버플로 조건을 감지하고 elipses를 추가 할 수 있습니다 : http://stackoverflow.com/questions/2059743/detect-elements-overflow -using-jquery –

@Chris McCall 당신은 저의 대답 아래에 덧글을 달았습니다. 질문이 아닙니다. 이것은 나에게 알리지 만 OP는 알리지 않습니다. 나는 주된 질문 아래에 코멘트로 다시 게시 할 것이지만 코멘트 대신 대답으로 게시해야한다. 글을 올리시면 알려주세요. 제 의견을 삭제하겠습니다. – nortron

정확한 코드를 찾아야하지만 jQuery로는 완전히 가능합니다. 이 아마도? 같은

뭔가

var container = $("#container"); 
var list = $("#list"); 

var contHeight = container.height(); 
var listHeight = list.height(); 

while (ulHeight > contHeight) { 
    ul.children().last().hide(); 
    var ulHeight = ul.height(); 
}

는 그것을 테스트하지 않은,하지만 그것은 생각입니다. 또는 각 어린이가 한 단계 높이를 따라 단계를 거쳐 한도를 초과하여 모든 것을 숨길 수 있습니다.

출처

2010-03-04 00:37:56

기회가 생겼을 때 돌아와이 대답을 시험해야합니다. 이 응답은 매우 유망 해 보입니다. – MedicineMan

먼저 div의 고정 높이를 가져와야합니다. 그런 다음 div의 항목을 반복하고 div에서 파고 들기 시작할 때이를 파악합니다.

예 : http://jsfiddle.net/pqsEG/1/ 내 대답은 아래에 댓글 크리스 맥콜에서

출처

2010-03-04 00:38:01 PetersenDidIt

항목 목록이 너무 깁니다. 어떻게 상태를 감지하고 해결합니까?

답변

관련 문제