如何給HTML頁面的文本設置字符和單詞間距

時間 2019-11-17

標籤如何 html 頁面文本設置字符單詞間距欄目 HTML 简体版

原文原文鏈接

設置字符和單詞間距介紹

屬性名	單位	描述
letter-spacing	px	設置字符間距
word-spacing	px	設置單詞間距

letter-spacing設置字符間距

letter-spacing屬性原理是：根據要設置的文本每個字符之間的間距。
讓咱們進入letter-spacing屬性的實踐，實踐內容如：將HTML頁面中的p標籤中的文本每個字符間距設置爲50px。
代碼塊html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設置字符和單詞距離</title>
    <style>
        p{
            letter-spacing: 50px;
        }
    </style>
</head>
<body>
    <p>成功不是戰勝別人，而是改變本身。</p>
</body>
</html>

結果圖網站

word-spacing設置單詞間距

word-spacing屬性原理是：根據要設置的文本，以空格爲核心設置間距，主要用於在英文的網站中，筆者使用中文是爲了讓讀者更好的理解word-spacing屬性的原理。
讓咱們進入letter-spacing屬性的實踐，實踐內容如：將HTML頁面中的p標籤中的每個以空格之間的間距設置爲30px。ui
代碼塊spa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設置字符和單詞距離</title>
    <style>
        p{
            word-spacing: 30px;
        }
    </style>
</head>
<body>
    <p>成功 不是 戰勝 別人，而是改變本身。</p>
</body>
</html>