为什么我的文字会溢出到下一栏？

Question

我尝试寻找这个问题的答案，但是我使用的每种方法都不起作用。我的网站需要 4 列，当我将一个巨大（或相对正常）大小的段落放入 HTML 中时，我的 CSS 会将文本溢出到下一列中，并奇怪地在该列的末尾处被切断，它应该是当网格完全延伸到页面底部时。

这是我目前正在做的事情，我希望文本出现在向下的一列中，而不是下一列。这是我当前的 CSS（顺便说一句，我正在使用 CSS 网格）：

  .columns {
    width:auto;
    display: inline-block;
    column-count: 4;
    grid-column: 6;
    grid-row: 6 / span 8;
    margin-top: 10px;
    text-align: center; 
    text-overflow: ellipsis;
    
  }

  .col {
    overflow-wrap: break-word;
  }

这是我当前的 HTML：

<div class="columns">  
        <div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p class="text">Ut efficitur dapibus lorem, a facilisis eros aliquet vel. Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc</p></div>
        <div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Hi</p></div>
        <div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Hi</p></div>
        <div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Hi</p></div>
        
</div>

抱歉，如果它太混乱了，我是网络开发的新手。我感谢任何帮助！

Answer 1

使用

grid

来布局列，而不是

num-columns

.columns {
  width:auto;

  /* EDIT Using grid to lay this out */
  /* display: inline-block; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  /* EDIT Set the number of columns with grid */
  /* column-count: 4; */

  grid-column: 6;
  grid-row: 6 / span 8;
  margin-top: 10px;
  text-align: center;
  text-overflow: ellipsis;
}

.col {
  overflow-wrap: break-word;

  /* EDIT Debug */
  border: 2px solid brown;
}

<div class="columns">
  <div class="col">
    <img src="https://dummyimage.com/100x80/000/fff" id="image1">
    <p class="text">Col 1. Ut efficitur dapibus lorem, a facilisis eros aliquet vel. Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc
    </p>
  </div>

  <div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Hi. Col 2</p></div>
  <div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Hi. Col 3</p></div>
  <div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Hi. Col 4</p></div>
</div>