요소 내에서 열 나누기를 방지하는 방법은 무엇입니까?

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

편집 : 너비는 원치 않는 렌더링을 보여주기 위해 지정됩니다. 실제 경우에는 물론 고정 너비가 없습니다.

이를 수행하는 올바른 방법은 break-inside CSS 속성을 사용하는 것입니다 .

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

불행히도 2019 년 10 월 현재 Firefox에서는 지원되지 않지만 다른 모든 주요 브라우저에서는 지원됩니다 . Chrome을 사용하면 위의 코드를 사용할 수 있었지만 Firefox에서 아무것도 작동시킬 수 없었습니다 ( 버그 549114 참조 ).

필요한 경우 Firefox에서 할 수있는 해결 방법은 끊지 않는 내용을 표에 포장하는 것이지만 피할 수 있다면 정말 끔찍한 해결책입니다.

최신 정보

위에서 언급 한 버그 보고서에 따르면 Firefox 20 이상은 page-break-inside: avoid요소 내부에서 열 나누기를 피하는 메커니즘으로 지원 하지만 아래 코드 스 니펫은 여전히 ​​목록에서 작동하지 않음을 보여줍니다.

.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;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* 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에서는 침입자가 여전히 버그가있는 것으로 보입니다. 그러나 break-inside : avoid와 함께 overflow : hidden을 요소에 추가하면 Firefox 및 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;

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

허용 된 답변은 이제 2 살이며 변경 사항이있는 것으로 보입니다.

이 기사에서는column-break-inside 속성 사용에 대해 설명합니다 . break-inside후자는 W3 사양에 문서화되어 있기 때문에 이것이 어떻게 또는 왜 다른지 말할 수 없습니다 . 그러나 Chrome 및 Firefox는 다음을 지원합니다.

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-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>

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

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-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;
}

Firefox 26은 필요한 것 같습니다

page-break-inside: avoid;

그리고 Chrome 32 요구 사항

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-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/

Firefox의 가능한 해결 방법은 내부에서 나누고 싶지 않은 요소의 CSS 속성 "display"를 "table"로 설정하는 것입니다. LI 태그에서 작동하는지 모르겠지만 (목록-항목 스타일을 잃을 것입니다) P 태그에서는 작동합니다.

방금 div다음 열을 추가하여 s를 수정했습니다.

overflow: auto

아이에게 div.

* Firefox에서만 수정되었습니다!

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

나는 그것을 사용하여 고쳤다.

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

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

완벽하게 작동

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

이것은 파이어 폭스와 크롬에서 작동하는 것 같습니다 : 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 */
}

참고 : 플로트 속성은 차단 동작을 만드는 하나가 될 것으로 보인다.

이 답변은 특정 상황에만 적용될 수 있습니다. 요소의 높이를 설정하면 열 스타일이 적용됩니다. 따라서 해당 높이 내에 포함 된 모든 것을 행으로 유지합니다.

나는 op와 같은 목록을 가지고 있었지만 그 항목에 작용하는 두 가지 요소, 항목과 버튼이 포함되어 있습니다. 나는 테이블처럼 처리 <ul> - table, <li> - table-row, <div> - table-cell4 열 레이아웃의 UL을 넣어. 항목과 버튼 사이에서 열이 분리되는 경우가있었습니다. 내가 사용한 트릭은 단추를 덮을 수 있도록 Div 요소에 선 높이를 부여하는 것이 었습니다.