CSS列（NOT网格）在Chrome

Question

我被困住了，似乎无法解决这个问题。

我正在使用一个我正在调用“text-col-”的类，后跟一个使用columns: [number]; CSS的最多6个数字。它完全像我打算在Firefox中那样工作，但不能在Chrome中工作。昨天我遇到了完全相反的问题，但我想我没有完全解决它（显然）。我将在这里编写特定的代码（所以你不必查找它），但也链接到一个实时版本，你可以直观地看到我的问题（在Chrome中，就是这样）。

/* SCSS
@for $i from 1 through 6 {
  .text-col-#{$i} {
    width: 100%;
    columns: $i;
    
    @include clearfix;
    @include mq(tablet) {
      @if $i >= 5 {
        clear: both;
        columns: 2;
      }
    }
    @include mq(phone) {
      @if $i >= 3 {
        columns: 1;
      }
    }
  }
}
See the generated css below */

/* CSS */

.text-col-1 {
  width: 100%;
  -webkit-columns: 1;
  columns: 1; }
  .text-col-1::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }

.text-col-2 {
  width: 100%;
  -webkit-columns: 2;
  columns: 2; }
  .text-col-2::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }

.text-col-3 {
  width: 100%;
  -webkit-columns: 3;
  columns: 3; }
  .text-col-3::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }
  @media only screen and (max-width: 480px) {
    .text-col-3 {
      -webkit-columns: 1;
      columns: 1; } }

.text-col-4 {
  width: 100%;
  -webkit-columns: 4;
  columns: 4; }
  .text-col-4::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }
  @media only screen and (max-width: 480px) {
    .text-col-4 {
      -webkit-columns: 1;
      columns: 1; } }

.text-col-5 {
  width: 100%;
  -webkit-columns: 5;
  columns: 5; }
  .text-col-5::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .text-col-5 {
      clear: both;
      -webkit-columns: 2;
      columns: 2; } }
  @media only screen and (max-width: 480px) {
    .text-col-5 {
      -webkit-columns: 1;
      columns: 1; } }

.text-col-6 {
  width: 100%;
  -webkit-columns: 6;
  columns: 6; }
  .text-col-6::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .text-col-6 {
      clear: both;
      -webkit-columns: 2;
      columns: 2; } }
  @media only screen and (max-width: 480px) {
    .text-col-6 {
      -webkit-columns: 1;
      columns: 1; } }
      
 /* CSS to center the text */
 
 [class*="text-col-"] {
  text-align: center;
 }

<!-- Written in pug-html (Jade), but here's the generated HTML -->

<div class="container">
  <p class="text-col-1">Text Columns</p>
  <p class="text-col-1">.text-col-1</p>
  <p class="text-col-2">.text-col-2<br/>.text-col-2</p>
  <p class="text-col-3">.text-col-3<br/>.text-col-3<br/>.text-col-3</p>
  <p class="text-col-4">.text-col-4<br/>.text-col-4<br/>.text-col-4<br/>.text-col-4</p>
  <p class="text-col-5">.text-col-5<br/>.text-col-5<br/>.text-col-5<br/>.text-col-5<br/>.text-col-5</p>
  <p class="text-col-6">.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6</p>
  <!-- Wrapped-->
</div>
<div class="container">
  <div class="text-col-1">Text Columns</div>
  <div class="text-col-1">.text-col-1</div>
  <div class="text-col-2">.text-col-2<br>.text-col-2</div>
  <div class="text-col-3">.text-col-3<br/>.text-col-3<br/>.text-col-3</div>
  <div class="text-col-4">.text-col-4<br/>.text-col-4<br/>.text-col-4<br/>.text-col-4</div>
  <div class="text-col-5">.text-col-5<br/>.text-col-5<br/>.text-col-5<br/>.text-col-5<br/>.text-col-5</div>
  <div class="text-col-6">.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6</div>
</div>

以下是指向其“实时”版本的链接：https://fexell.github.io/Lib/test/classes.html#text-cols

那么，为什么这不适用于Chrome？

问题图片： Firefox shows this Chrome shows this

Answer 1

它似乎必须对中断做一些事情以及如何在列中解释<br>。 watch this