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

ID:13101 / 打印

如何使用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>