CSS의 목록 항목 내에서 열 나누기를 방지하는 방법은 무엇입니까?

요소 내 열 나누기 방지

CSS 및 반응형 디자인 영역에서는 특정 요소가 주어진 열 내에서 그대로 유지되도록 하는 것이 바람직한 경우가 많습니다. 목록을 나타내는 다음 HTML 구조를 고려해 보세요.

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

이제 일부 CSS를 적용하여 여러 열을 생성해 보겠습니다.

.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

알다시피 4번 항목은 두 번째 열과 세 번째 열로 나누어져 있습니다. 이를 방지하기 위해 break-inside CSS 속성이 도움이 됩니다.

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

안타깝게도 Firefox에서는 현재 이 속성에 대한 지원이 부족합니다. 따라서 Firefox에는 대체 솔루션이 필요합니다. 한 가지 해결 방법은 깨지지 않는 콘텐츠를 테이블에 래핑하는 것입니다. 그러나 이는 이상적이지는 않습니다.

업데이트:

Firefox 20에는 페이지 나누기 내부에 대한 지원이 포함되어 있습니다. : 열 나누기를 방지하는 메커니즘으로 사용하지 마세요. 그러나 다음 코드는 목록에 대해 예상대로 작동하지 않음을 보여줍니다.

.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;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

위 내용은 CSS의 목록 항목 내에서 열 나누기를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!