Css 如何修复列中的笨拙文本？

我最近一直在练习专栏，但我似乎无法正确地理解它们

这可能很容易修复，但我目前在web开发方面相当差劲。图片中突出显示的部分如果从第二列的顶部开始，显然会看起来更好，我怎么能把它撞倒呢

我从来都不知道要发布什么代码，所以请告诉我你需要看到什么，我会尽快编辑它

谢谢你的帮助

试试这个：

HTML:

<div class="test">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed turpis congue, dignissim nibh eu, ullamcorper neque. Etiam id mi cursus, pellentesque sapien at, volutpat ligula. Sed mattis dapibus dictum. Duis hendrerit ut est in rutrum. Suspendisse in nibh fringilla, congue erat non, euismod eros. Proin at elit ac dolor pharetra gravida quis in quam. Sed fringilla porta quam non tincidunt.
</p>
<p>
Phasellus eget purus et tellus lacinia faucibus non nec massa. Duis mattis vestibulum sagittis. Sed dapibus efficitur velit, vitae lobortis tortor cursus vel. Maecenas eu elementum enim. Nunc porttitor eleifend enim, sit amet dapibus enim hendrerit in. Quisque congue urna ut nulla placerat, ac pretium nisl elementum. Aliquam nec tristique diam. Quisque eget fringilla purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris orci arcu, porta sed ligula vitae, lobortis dignissim massa. Aliquam suscipit finibus augue non tincidunt. Aenean fringilla nulla eget urna ultricies, in imperdiet orci mollis. Pellentesque sit amet mattis ligula, vitae laoreet ex. Mauris molestie sodales condimentum. Vestibulum tortor dolor, scelerisque non molestie nec, mollis eget sapien. Suspendisse commodo magna a est elementum, a faucibus nisl sagittis.
</p>
<p>
Proin facilisis non turpis a consequat. Duis a mi dapibus, tempor velit condimentum, aliquet quam. Ut ut sapien vestibulum orci egestas facilisis. In hac habitasse platea dictumst. Etiam porttitor libero mattis justo finibus, a mattis erat ullamcorper. Donec et ultrices metus, vestibulum dictum est. Sed bibendum sodales egestas. Duis molestie libero at tortor sagittis, sed pellentesque dolor gravida. Pellentesque metus ipsum, varius at gravida ac, maximus id urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Morbi gravida imperdiet mauris, id dictum quam congue in. Integer purus justo, pellentesque vestibulum euismod in, finibus ut neque. Sed imperdiet iaculis blandit. Mauris gravida, nibh quis placerat fringilla, nisl nibh tincidunt neque, et tincidunt dolor ex rutrum quam. In non tellus arcu. Sed feugiat nibh ac lectus volutpat, sed varius augue lobortis. Nullam velit magna, laoreet id egestas vitae, luctus et leo. Fusce ultricies dolor blandit nibh pulvinar, vel maximus augue rhoncus. Curabitur posuere, libero nec mollis eleifend, orci sapien sodales mi, non fringilla sem ligula non leo.
</p>
<p>
Maecenas id lobortis nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mattis tortor ut enim laoreet, blandit dignissim augue sodales. Duis a est diam. Phasellus lobortis aliquam tellus. Sed sit amet elit pulvinar, volutpat dui sit amet, tempus dolor. Nam quis feugiat metus. Quisque dictum dui at sapien pulvinar tincidunt. Aliquam at ornare diam. Nam interdum lobortis urna ac aliquet. Integer in sollicitudin metus. Sed rutrum, dolor non venenatis malesuada, velit enim pulvinar dui, ac sagittis massa ante et arcu. Nullam arcu odio, varius porttitor aliquam congue, lobortis at nibh.
</p>
</div>

---

在这里，您可以看到文本如何仅在段落中断开，而没有其他内容。不需要肮脏的黑客，br或诸如此类的东西

段落上的

break-inside:avoid列应该可以做到这一点，但是浏览器支持不是很好。您也可以尝试
-webkit分栏内：avoid
和
分页内：avoid
如果您的文本以及容器的高度和宽度是静态的，您可以只在文本中添加

。哇，我不敢相信我没有先尝试。天哪。非常感谢。很明显，我必须多练习一些……然后你会在下一篇专栏文章中有一行。这是使用
multi-column
时的主要问题。您应该发布标记的示例（即使它只是
p
元素，重要的是要知道它是），并指定文本的格式，或者，从负面的角度说，哪种类型的中断是不允许的。只在段落之间中断不是被要求的，而且这肯定不是正常或良好的排版实践。@JukkaK.Korpela他说：“哇，我不敢相信我没有先尝试过。天哪。谢谢你！我显然必须多练习一些……”因为“只在段落之间中断”：）重要的是问题的实际要求以及答案如何解决。这就是他所问的（换句话说），而且它完美无瑕。此外，重要的是使用正确的标记，如果他不知道，最好告诉他。事实上，你对每件事都吹毛求疵，即使是正确的答案，也不能让你更正确。这只会让你挑剔，因为没有更好的词。
.test {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
.test p{display:inline-block}