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

PVS

Super Moderator
Thành viên BQT
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​
 

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
silzedt_1207          Inbox   PVS

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

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top