如何在html中定义字段文字,css 两列的文字怎么设置？

css 两列的文字怎么设置？下面本篇文章就来给大家介绍一下使用CSS设置两列文字的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在CSS中，可以借助多列属性中的column-count属性来设置两列文字。column-count属性指定某个元素应分为的列数。

语法column-count: number|auto;

属性值：number：列的最佳数目将其中的元素的内容无法流出

auto：列数将取决于其他属性，例如："column-width"

注意： Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

示例：

.newspaper

{

-moz-column-count:2; /* Firefox */

-webkit-column-count:2; /* Safari and Chrome */

column-count:2;

}

文本分成两列显示

“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，

我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，

我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，

我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，

我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”

效果图：

如果嫌两列之间的空隙小了，可以使用column-gap属性设置列之间的差距。还可以使用column-rule属性指定列之间的规则：宽度，样式和颜色。

.newspaper

{

-moz-column-count:2; /* Firefox */

-webkit-column-count:2; /* Safari and Chrome */

column-count:2;

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */

-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */

column-rule:4px outset #ff00ff;

}

效果图：

更多前端开发知识，请查阅 HTML中文网 ！！