本文介绍了CSS3中的两个重要特性：响应式多列布局和断字。对于多列布局，可以设定固定的列宽或指定内容填充的列数，以实现文本的灵活分布。此外，还详细讲解了如何添加列间距和分隔线。在断字方面，通过CSS样式实现文本超出容器宽度时自动截断并显示省略号。
1. CSS响应式多列布局
有没有过要把一段文本分成多列显示的需求？
可以把文本分别放在不同的元素中，然后分别添加样式。可是，纯粹为了添加样式而修改标记并不是值得提倡的。CSS多列布局规范描述了如何通过多列显示文本。比如以下标记：
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
<!-- 省略很多文本 -->
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
<!-- 省略很多文本 -->
</p>
</main>使用CSS多列布局可以通过几种方式让文本分成多列显示。可以给每一列设定固定的列宽（比如12em），也可以指定内容需要填充的列数（比如3）。
代码如下，设定列宽：
main{
column-width: 12em;
}
完整代码如下：
<!doctype html>
<
最低0.47元/天 解锁文章
扫一扫
9365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
