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
15,228
Được Like
11,641
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom