HTML/CSS 만있는 경우 (또는 최소한 의사 클래스 등으로 일부 요소를 표시/숨기는 방법) 요소의 내용 오버플로 (수직으로 만). 예, 나는 그것을 할 수있는 방법을 알고 있고 (나는 JS 예제가 필요하지 않습니다. 제발), 그냥 영리한 방법이 있다면 자바 스크립트가 없는지 알고 싶습니다.오버 플로우가 있는지 여부를 감지하지 않고
오버플로가있을 때만 표시되는 "more ..."버튼을 표시하려고 시도하고 가능한 경우 JS없이이 작업을 수행하려고합니다.
는 여기에 100 % 신장이 솔루션의 버전입니다 - 내용이 전체 페이지 이상을 차지하려고 그렇게 할 때, 당신은 "더 ..."링크를 얻을. 모든 브라우저에서 정상적으로 작동합니다.
http://jsfiddle.net/nottrobin/u3Wda/1/
나는 단지 "다른 행을 추가"제어를 위해 자바 스크립트를 사용했습니다 - 데모 purpoes합니다. 실제 솔루션에는 JavaScript가 사용되지 않습니다.
경고 :
는 컨테이너 요소 overflow: hidden를 확인하고 그것을 max-height을 제공합니다. 그런 다음 해당 컨테이너 요소 안에 "더 많은"링크를 넣으십시오 (position: absolute). max-height 안에 있습니다. 컨테이너 내부의 내용이 컨테이너를 max-height으로 푸시하지 않으면 "더"링크가 표시되지 않습니다.
line-height과 조심하면 모든 선이 반으로 잘리는 것을 방지 할 수 있어야합니다.
예 :
그냥 충분한 텍스트 : http://jsfiddle.net/nottrobin/MrAKv/17/
너무 많은 텍스트 : http://jsfiddle.net/nottrobin/MrAKv/16/
짧은 버전은 지원하는 브라우저에서 작동합니다 max-height :
http://caniuse.com/#search=max-height
는 IE6의 지원이 필요한 경우, 사용 이 다소 간결한 솔루션 :
http://jsfiddle.net/nottrobin/MrAKv/18/
(면책 조항 - 단지 구글 크롬) 여기
잘 보입니다. 나는 OP에서 회신을받을 때 내 대답을 삭제하기를 고대합니다. 편집 : 그것은 descenders를 죽일 사실을 제외하고 참조하십시오 : http://jsfiddle.net/thirtydot/MrAKv/10/ – thirtydot
@ thirtydot 좋은 지적. 감사. 그래도 줄 높이를 조정하면 쉽게 해결할 수 있습니다. http://jsfiddle.net/MrAKv/15/. –
이것은 좋은 영리한 예이지만 유감스럽게도 가변 높이의 경우에는 작동하지 않습니다. 컨테이너는 사용자의 브라우저 높이를 채울 것이고, 한 줄에 하나씩 항목 목록 일 뿐이며, 브라우저의 높이가 오버 플로우 될 수있는 항목을 많이 표시합니다. 나는 이것이 문제의 뿌리라고 생각한다. –
고정 높이 컨테이너 하나입니다 테스트 : http://jsfiddle.net/NGLN/PC94w/
가변 높이가 필요합니다. 실제로는 사용자의 브라우저 높이이며 크기를 조정할 수 있습니다. –
요소가 고정 된 높이가 있습니까? –
@Knu : 아이디어가 있으십니까? – thirtydot
@dot kinda 예. – Knu