CSS의 목록 요소 내에서 열 나누기를 방지하려면 어떻게 해야 합니까?

요소 내에서 열 나누기 방지

목표는 콘텐츠가 요소 내의 여러 열에 걸쳐 깨지는 것을 방지하여 원하는 렌더링을 보장하는 것입니다. 아래 예를 고려해 보세요.

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

Firefox의 렌더링:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

목표는 다음과 같습니다. 콘텐츠 중단을 방지하여 더욱 응집력 있는 렌더링을 달성합니다. 디스플레이:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

또는

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer

해결책은 break-inside CSS 속성을 활용하는 데 있습니다.

.x li {
    break-inside: avoid-column;
}

이 속성은 모든 주요 브라우저에서 지원됩니다. 파이어폭스를 제외하고. Firefox에서는 테이블을 사용하는 해결 방법을 사용할 수 있지만 이상적인 솔루션은 아닙니다.

업데이트

Firefox 20은 이제 페이지 나누기 내부를 지원합니다. 열 나누기를 방지하기 위해 다음 코드는 여전히 효과적으로 작동하지 않음을 보여줍니다. 목록:

CSS:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

HTML:

<div></div>