다중 열 레이아웃에서 목록 항목이 여러 열로 나누어지는 것을 방지하는 방법은 무엇입니까?

요소 내에서 열 나누기 방지

다중 열 레이아웃에서는 개별 목록 항목이 여러 열로 나누어지는 경우가 발생할 수 있습니다. 이러한 원치 않는 동작을 방지하려면 break-inside CSS 속성을 사용할 수 있습니다.

break-inside 사용

구체적으로 목록 항목 요소에 break-inside: escape-column을 설정하면 다음이 보장됩니다. 단일 열 내에서 그대로 유지됩니다:

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

Firefox 호환성 문제

안타깝게도 2021년 10월 현재 Firefox는 break-inside 속성을 지원하지 않습니다. 다른 주요 브라우저에서 사용할 수 있지만 Firefox에 대한 해결 방법이 필요합니다.

Firefox에 대한 해결 방법

Firefox에 대한 덜 바람직한 해결 방법은 깨지지 않는 콘텐츠를 테이블에 래핑하는 것입니다.

<div class='x'>
    <table>
        <tr><td>Number one</td></tr>
        <tr><td>Number two (longer)</td></tr>
        <tr><td>Number three</td></tr>
    </table>
</div>

Firefox 20 지원(일부)

Firefox 20에서는 다음에 대한 지원을 도입했습니다. page-break-inside: 방지하지만 목록 문제를 완전히 해결하지는 않습니다. 다음 코드는 항목이 여전히 중단됨을 보여줍니다.

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

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