Tìm hiểu định dạng các khoảng trắng trong CSS

[PVS]

Tìm hiểu định dạng các khoảng trắng trong CSS

Trong css có các kiểu định dạng như: letter-spacing, word-spacing, white-space. Chức năng cụ thể của từng loại như sau:

• letter-spacing: thiết lập khoảng cách các ký tự
  
• word-spacing: thiết lập khoảng cách các từ
  
• white-space: xử lý khoảng trắng

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>

​

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>

​

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>

Chúc các bạn thành công.

Nguồn: Internet​