如何仅使用 CSS 创建多列文本溢出？-css教程-PHP中文网

如何仅使用 CSS 创建多列文本溢出？

Barbara Streisand

发布： 2024-11-15 05:55:03

原创

816 人浏览过

How Can I Create Multi-Column Text Overflow Using Only CSS?

使用 CSS 创建多列文本溢出

在 Web 开发中，经常会遇到需要在多列中显示文本的情况。这种排列方式让人想起报纸布局，有助于提高可读性并节省空间。

使用 CSS 实现多列文本溢出

幸运的是，您可以单独使用 CSS 来实现这种多列效果，而无需使用 CSS诉诸多个div。以下代码片段演示了如何操作：

div.multi {
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

登录后复制

在此代码中：

column-count 设置所需的列数。在此示例中，它设置为 3。
column-gap 定义列之间的间距。这里指定了 10px 间隙。
column-rule 在列之间添加边框。在本例中，它是一个 1px 黑色边框。

将多类应用到您想要多列效果的任何 div。例如：

<div class="multi">
  <p>Today in Wales, someone actually did something interesting.</p>
  <p>Nobody was harmed in the incident, although one elderly victim is receiving counselling.</p>
</div>

登录后复制

这个纯 CSS 解决方案允许您动态显示多列文本，调整以适应不同的屏幕尺寸或浏览器窗口宽度。

以上是如何仅使用 CSS 创建多列文本溢出？的详细内容。更多信息请关注PHP中文网其他相关文章！