다중 열 레이아웃의 목록 항목 내부에서 열 나누기를 방지하는 방법은 무엇입니까?

요소 내에서 열 나누기 방지

다중 열 레이아웃을 사용할 때 열 나누기로 인해 요소가 바람직하지 않게 분할되는 문제가 발생하는 것이 일반적입니다. 이는 목록 항목과 같은 요소가 너무 길어 단일 열에 맞지 않을 때 발생할 수 있습니다.

문제 설명

다음 HTML 및 CSS를 고려하세요.

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

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

이 시나리오에서는 다음과 같이 일부 목록 항목이 열 간에 분할될 수 있습니다. 렌더링:

• 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

해결책: break-inside 속성

이 문제에 대한 해결책은 CSS break-inside 속성을 활용하는 것입니다. 중단을 방지하려는 요소에 break-inside: escape-column을 설정하면 해당 요소를 단일 열 내에 유지하도록 브라우저에 지시할 수 있습니다.

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

이 접근 방식은 주요 브라우저에서 널리 지원됩니다. , Chrome 및 Safari를 포함합니다. 그러나 2021년 10월 현재 Firefox에는 break-inside 속성에 대한 지원이 여전히 부족합니다.

Firefox 해결 방법

Firefox의 경우 테이블 사용과 관련된 해결 방법이 있습니다. . 그러나 이 솔루션은 부정적인 영향으로 인해 권장되지 않습니다.

Firefox 20의 페이지 나누기 내부 지원

Firefox 버그 보고서에 따르면(버그 549114) , 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>

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