요소 내의 열 파손을 방지하는 방법은 무엇입니까?

요소 내의 열 파손을 방지하는 방법은 무엇입니까?

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

네 번째 항목은 두 번째 열과 세 번째 열 사이에 분할되었습니다.어떻게 예방해야 하나요?

원하는 렌더링 모양은 다음과 같습니다.

• 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

편집: 너비는 원하지 않는 렌더링을 표시하기 위해 지정됩니다.실제의 경우, 물론 정해진 너비는 없습니다.

올바른 방법은 CSS 속성을 사용하는 것입니다.

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

안타깝게도, 2021년 10월 현재, 이것은 여전히 파이어폭스에서 지원되지 않지만 다른 모든 주요 브라우저에서 지원됩니다.Chrome을 사용하면 위의 코드를 사용할 수 있었지만 Firefox에서 작동하는 것은 아무것도 만들 수 없었습니다(Bug 549114 참조).

필요한 경우 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>

다른 사람들이 언급했듯이, 당신은 할 수 있습니다.overflow: hidden또는display: inline-block하지만 이것은 원래 질문에 표시된 총알을 제거합니다.솔루션은 목표에 따라 달라집니다.

업데이트 2 파이어폭스가 고장을 방지하기 때문입니다.display:table그리고.display:inline-block신뢰할 수 있지만 정확하지 않은 솔루션은 각 목록 항목을 자체 목록으로 래핑하여 스타일 규칙을 적용하는 것입니다.

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

.x ul {
    margin: 0;
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* Chrome, Safari, IE 11 */
    display:table;                      /* Actually FF 20+ */
}

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

추가;

display: inline-block;

하위 요소로 이동하면 열 간에 요소가 분할되지 않습니다.

중단하지 않을 요소의 스타일에 다음을 설정합니다.

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

2014년 10월 현재 Firefox 및 IE 10-11에서 침입이 여전히 발생하고 있는 것으로 보입니다.그러나 오버플로를 추가하면 요소에 숨김: 내부 침입: 피함: 파이어폭스 및 IE 10-11에서 작동하는 것 같습니다.현재 사용 중:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

Firefox는 이제 다음을 지원합니다.

page-break-inside: avoid;

이것은 열을 가로지르는 요소들의 문제를 해결합니다.

2015년에는 다음과 같은 이점이 있습니다.

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}

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

현재 받아들여진 답변은 2년이 되었고 상황은 바뀐 것으로 보입니다.

이 문서는 다음의 사용법을 설명합니다.column-break-inside소유물.나는 이것이 어떻게 또는 왜 다른지 말할 수 없습니다.break-inside왜냐하면 후자만 W3 사양에 문서화되어 있기 때문입니다.그러나 Chrome 및 Firefox는 다음을 지원합니다.

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

카드 열을 사용하는 동안 동일한 문제가 발생했습니다.

저는 그것을 사용하여 고쳤습니다.

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

다음 코드는 요소 내부의 열 구분을 방지하기 위해 작동합니다.

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

Firefox 26에는 다음이 필요한 것 같습니다.

page-break-inside: avoid;

그리고 Chrome 32에는

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

2019년에는 Chrome, Firefox 및 Opera에서 이 기능을 사용할 수 있습니다(다른 많은 시도가 실패한 후).

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

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

저는 제가 생각하는 것과 같은 문제를 가지고 있었고 다음과 같은 해결책을 찾았습니다.

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

FF 38.0.5에서도 작동: http://jsfiddle.net/rkzj8qnv/

방금 몇 가지를 고쳤어요div는 를추여다열분던할하로음을 추가하여 다음 되었습니다.

overflow: auto

divs의

*Firefox에서만 문제를 해결할 수 있다는 것을 깨달았습니다!

<style>
ul li{display: table;}  
</style>

완벽하게 작동합니다.

파이어폭스의 가능한 해결 방법은 내부에서 휴식을 취하고 싶지 않은 요소의 CSS 속성 "디스플레이"를 "테이블"로 설정하는 것입니다.LI 태그(아마도 목록 항목 스타일을 잃게 될 것입니다)에 대해 작동하는지는 모르겠지만 P 태그에 대해서는 작동합니다.

저는 실제 답변을 업데이트했습니다.

파이어폭스와 크롬에서 작동하는 것 같습니다. http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

참고: 플로트 속성이 블록 동작을 만드는 것으로 보입니다.

사용해 보십시오.

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid-column;
page-break-inside: avoid-column;
break-inside: avoid-column;

제게 도움이 된다면 당신에게 도움이 될 겁니다

이 답변은 특정 상황에만 적용될 수 있습니다. 요소의 높이를 설정하면 열 스타일에 따라 달라집니다.따라서 그 높이 내에 포함된 모든 것을 줄에 보관합니다.

저는 작업과 같은 목록을 가지고 있었지만, 그 목록에는 두 가지 요소, 즉 항목과 해당 항목에 적용할 버튼이 포함되어 있었습니다.나는 그것을 테이블처럼 다루었습니다.<ul> - table,<li> - table-row,<div> - table-cellUL을 4열 레이아웃에 배치합니다.항목과 항목의 단추 사이에 열이 분할되기도 했습니다.제가 사용한 속임수는 Div 요소에 버튼을 덮을 수 있는 선 높이를 부여하는 것이었습니다.

제가 다음과 같은 지원을 하려고 할 때 대부분의 재산이 무효라는 것을 보여주고 있습니다.

  page-break-inside: avoid-column;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid-column; 

제가 반응성을 확인할 때는 잘 작동하지 않습니다

누구나 나에게 같은 해결책을 제공할 수 있습니다.

언급URL : https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element