如何修复列中的尴尬文本？

Question

我最近一直在练习专栏，我似乎无法让他们做对。

这可能很容易修复，但我目前在网络开发方面非常糟糕。如果从第二列的顶部开始，图片中突出显示的部分显然会更好看，我该如何将它碰到？

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

感谢您的帮助！

Answer 1

段落上的break-inside: avoid-column应该可以解决问题，但浏览器支持不是很好。您还可以尝试-webkit-column-break-inside:avoid和page-break-inside:avoid jsfiddle

Answer 2

试试这个：

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>

CSS：

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

在这里，您可以看到文本仅在段落中断开，而不是其他任何内容。不需要肮脏的黑客，br或类似的东西。 See fiddle