Liên hệ
css

Định dạng các khoảng trắng CSS word white letter-spacing

Thiết lập khoảng cách các ký tự với letter-spacing, khoảng cách các từ word-spacing và cách đoạn văn xử lý khoảng trắng với white-space

Khoảng cách ký tự letter-spacing

Thiết lập khoảng cách các ký tự bằng thuộc tính letter-spacing, nó có thể nhận các giá trị:

  • normal khoảng cách mặc định
  • length giá trị theo đơn vị px, pt, cm ... khoảng cách các chữ
  • inherit kế thừa theo phần tử cha
<style>
    p.normal {
        letter-spacing: normal;
    }
    p.positive {
        letter-spacing: 4px;
    }    
    p.negative {
        letter-spacing: -1.5px;
    }
</style>

<p class="normal">This paragraph has no additional letter-spacing applied.</p>
<p class="positive ">This paragraph is letter-spaced at 4px.</p>
<p class="negative">This paragraph is letter-spaced at -1.5px</p>

This paragraph has no additional letter-spacing applied.

This paragraph is letter-spaced at 4px.

This paragraph is letter-spaced at -1.5px

Khoảng cách các từ word-spacing

Sử dụng word-spacing giống với letter-spacing để thiết lập khoảng cách các từ:

<style>
    p.wordnormal {
        word-spacing: normal;
    }
    p.wordpositive {
        word-spacing: 20px;
    }
    p.wordnegative {
        word-spacing: -5px;
    }

</style>

<p class="wordnormal">Đoạn văn bản bình thường.</p>
<p class="wordpositive">Đoạn văn có word-space 20px.</p>
<p class="wordnegative">Đoạn văn có word-space -5px.</p>

Đoạn văn bản bình thường.

Đoạn văn có word-space 20px.

Đoạn văn có word-space -5px.

Thuộc tính white-space

Thuộc tính white-space để điều khiển cách hiện thị khoảng trắng. Nó có thể nhận các giá trị như:

  • normal thiết lập về mặc định
  • inherit kế thừa phần tử cha
  • nowrap không ngắt dòng
  • pre định dạng chữ giữ nguyên và chỉ xuống dòng khi gặp ký tự xuồng dòng \r \n
  • pre-line văn bản tự xuống dòng nhưng các khoảng trắng thêm vào bị bỏ qua
  • pre-wrap văn bản tự xuống dòng và khoảng trắng giữ nguyên
<style>
    p.nowrap {
        white-space: nowrap;
    }
    p.pre {
        white-space: pre;
    }
    p.preline {
        white-space: pre-line;
    }
    p.prewrap {
        white-space: pre-wrap;
    }
</style>

<div class="card p-1" style="width: 200px">
    <p class="nowrap">
        Ví dụ white-space sự dùng           để điều khiển
        khoảng trắng trong văn bản
    </p>

    <p class="pre">
        Ví dụ white-space sự dùng           để điều khiển
        khoảng trắng trong văn bản
    </p>
    <p class="preline">
        Ví dụ white-space sự dùng           để điều khiển
        khoảng trắng trong văn bản
    </p>
    <p class="prewrap">
        Ví dụ white-space sự dùng           để điều khiển
        khoảng trắng trong văn bản
    </p>
</div>

Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản

Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản

Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản

Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản

Vui lòng đăng ký ủng hộ kênh