2011-12-16 3 views
8

CSS3 다중 열에 최소 높이를 추가 할 수 있습니까?CSS3 다중 열에 최소 높이 추가

텍스트가 두 번째 열로 한 줄 넘겨지기보다는 네 줄로되어있을 때 하나의 열만 갖고 싶습니다. 예를 들어 차라리 것

:

Lorem ipsum dolor sit amet 
sodales id ipsum ipsum mauris 
interdum qui congue 
nisl quis, turpis tristique 

를하지 않음이 :

Lorem ipsum dolor sit amet  nisl quis, turpis tristique 
sodales id ipsum ipsum mauris 
interdum qui congue 

어떤 조언을?

답변

7

최소 높이는 없지만 한 단락 끝에있는 행의 최소 행 수는 orphans (및 그 반대의 ... 행은 시작 부분에 단독으로 나타납니다. 단락은 widows입니다. 이 CSS 속성은 spec에 따라 열을 따라야하지만 Chrome에서 빠른 테스트를 수행했지만 아무런 차이가 없습니다. 그래서 우리는 이것이 구현되기를 기다려야한다고 생각합니다.

이 설정되어야하는 방법의 예 : 열에

p.columns { 
    column-count: 2; 
    orphans: 3 
} 
+0

입니다 ... 브라우저 별 접두사를 사용해야하는 이유는 우리 모두 한 번에 롤하지. Thanks @ Nathan – uriah

+0

WebKit은 오픈 소스 프로젝트이므로 자신의 소스 코드를 제공 할 수 있으며 이미 완료되지 않은 경우 버그를 신고 할 수도 있습니다 ([Help The Community : Report Browser 버그] (http://coding.smashingmagazine.com)/2011/09/07/help-the-community-report-browser-bugs /);) – FelipeAls

0

최소 높이가 이제 IE (10)와 파이어 폭스에서 지원됩니다. 이 두 버그 리포트 내가 아는 Bug#55740 Bug#65691

+1

자세한 정보를 제공하는 다른 링크를 제공하십시오 – Parvathy

0

이미 설명한 바와 같이 웹킷에서 그러나 텍스트가 컨테이너 외부에서 오른쪽으로 오버 플로우,이 오래된 것입니다. 그러나 내 연구 중에이 스레드가 먼저 와서 내 결과를 공유하는 것이 좋습니다. column-fill이라는 partial supported 속성이 있는데, 당신과 내가 찾고있는 것입니다. 부분 수단, 당신은 여기

column-count: 2; 
column-width: auto; 
column-fill: auto; 

이는 짜증 MDN Docs