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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
13,835
Được Like
9,910
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
Mã:
<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>

screenshot_1591152562.png

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ừ:
Mã:
<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>

screenshot_1591152594.png

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
Mã:
<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>


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


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom