您好,欢迎访问一九零五行业门户网

如何使用CSS3将文本分成多列进行排列?

为了将文本分成多列,我们使用css3的“column-count”属性。该属性用于将html元素的内容分成指定数量的列。在这里,我们将使用两个不同的示例来演示css的“column count”属性在2列和3列中排列文本的应用。
语法column-count: n;
在这里,“n”是一个正整数,表示我们希望将文本排列成的列数。
example 1 的中文翻译为:示例 1在这个例子中,我们将使用css3的“column-count”属性将“p”标签的内容分成3列。
<!doctype html><html lang=en><head> <title>how to arrange text in multi columns using css3?</title> <style> .para { column-count: 3; } </style></head><body> <h3>how to arrange text in multi columns using css3?</h3> <p class=para>lorem ipsum dolor sit amet consectetur adipisicing elit. nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</p></body></html>
example 2 的中文翻译为:示例2在这个例子中,我们将使用css3的“column-count”属性将“p”标签的内容分为两列。
<!doctype html><html lang=en><head> <title>how to arrange text in multi columns using css3?</title> <style> .para { column-count: 2; } </style></head><body> <h3>how to arrange text in multi columns using css3?</h3> <p class=para> <span>lorem ipsum dolor sit amet consectetur adipisicing elit. nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span> <span>lorem ipsum dolor sit amet consectetur adipisicing elit. nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span> <span>lorem ipsum dolor sit amet consectetur adipisicing elit. nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span> </p></body></html>
结论在这篇文章中,我们学习了“column-count”属性是什么,以及如何使用css3将文本排列成多列。在第一个示例中,我们通过将“column-count”属性设置为3来将文本排列成3列,在第二个示例中,我们通过将“column-count”属性设置为2来将文本排列成3列。
以上就是如何使用css3将文本分成多列进行排列?的详细内容。
其它类似信息

推荐信息