如何使用CSS3將文字分成多列排列？
- WBOY轉載
- 2023-08-23 13:29:021194瀏覽
為了將文字分成多列，我們使用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將文字分成多列排列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除