Tidadigi Logo

CSS word-spacing Property

Thuộc tính word-spacing điều chỉnh khoảng trắng giữa các từ. Nó có thể tăng hoặc giảm tùy ý bạn. Thuộc tính CSS này có thể được đặt thành normal hoặc một độ dài cụ thể (dương hoặc âm). Điều này giúp cải thiện khả năng đọc và định dạng văn bản.

Cú pháp

word-spacing: normal|length|initial|inherit;

Giá trị thuộc tính

Normal

  • Xác định khoảng cách mặc định giữa các từ là 0.25em. Đây là giá trị mặc định của thuộc tính.

Ví dụ: Trong ví dụ này, chúng ta trình bày thuộc tính word-spacing CSS. Chúng ta đặt văn bản có khoảng cách normal, kiểu màu xanh lá cây, đậm và cỡ chữ 25px.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS word-spacing Property
    </title>
</head>

<body>
    <h1>The word-spacing Property</h1>

    <h2>word-spacing: normal:</h2>
    <p style="word-spacing: normal; 
              color: green; font-weight: 
              bold; font-size: 25px;">
        This is some text. This is some text.
    </p>
</body>

</html>

Đầu ra:

 css-word-spacing-property

Length

  • Nó xác định một khoảng trắng bổ sung giữa các từ (tính bằng px, pt, cm, em, v.v.). Giá trị âm cũng được cho phép.

Ví dụ: Trong ví dụ này, chúng ta đặt word-spacing thành 20px trong một đoạn văn bản. Đoạn văn được định kiểu màu xanh lá cây, đậm và cỡ chữ 25px. Thể hiện thuộc tính word-spacing CSS để điều chỉnh khoảng cách văn bản.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS word-spacing Property</title>
</head>

<body>
    <h1>The word-spacing Property</h1>

    <h2>word-spacing: length is 20px</h2>
    <p style="word-spacing: 20px;
              color: green; 
              font-weight: bold;
              font-size: 25px;">
        GeeksforGeeks - A Computer Science Portal For Geeks!
    </p>
</body>

</html>

Đầu ra:

css-word-spacing-propertyVí dụ: Trong ví dụ này, chúng ta minh họa thuộc tính word-spacing với giá trị âm là -20px. Nó điều chỉnh khoảng cách giữa các từ trong một đoạn văn để nhấn mạnh và tạo kiểu.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS word-spacing Property</title>
</head>

<body>
    <h1>The word-spacing Property</h1>

    <h2>word-spacing: length is -20px</h2>
    <p style="word-spacing: -20px;
              color: green; 
              font-weight: bold;
              font-size: 25px;">
        GeeksforGeeks - A Computer Science Portal For Geeks!
    </p>
</body>

</html>

Đầu ra:

css-word-spacing-property

Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính word-spacing được liệt kê dưới đây:


Last Updated : 21/07/2025