Thuộc tính white-space định dạng khoảng trắng trong CSS

Sử dụng thuộc tính CSS white-space để thiết lập cách ứng xử của những khoảng trắng liên tục trong một phần tử HTML, thiết lập tự động xuống dòng hoặc hiện thị nguyên bản

thuộc tính css
white-space thiết lập ứng xử khoảng trắng (space,
xuống dòng, tab …)

normal

nowrap

pre

pre-line

pre-wrap

inherit

<div style="width: 200px;border: 1px dotted; padding: 5px;">
    Đây là văn bản
     <strong>HTML</strong>        bên trong        
    phần tử cha &lt;div&gt; có chiều rộng 200px.
    Văn bản này <br> có nhiều khoảng trắng, có cả
    ký tự xuống dòng
</div>

Đây là văn bản
HTML bên trong
phần tử cha <div> có chiều rộng 200px.
Văn bản này
có nhiều khoảng trắng, có cả
ký tự xuống dòng

???

Thuộc tính white-space trong CSS

Thuộc tính white-space để điều khiển cách hiện thị khoảng trắng (các ký tự space, xuống
dòng, tab …)
trong một phần tử. Nó có thể nhận các giá trị như:

normal : thiết lập về mặc định. Các khoảng trắng liên tục nếu có sẽ thu
gọn về một khoảng trắng
nowrap ứng xử giống normal, nhưng các dòng chữ (inline)
không tự xuống dòng nếu vượt quá chiều rộng phần tử chứa.
pre giữ nguyên các khoảng trắng liên tục,
và chỉ xuống dòng khi gặp ký tự xuồng dòng \n hoặc phần tử <br>
pre-line các khoảng trắng liên tục cũng thu gon về 1,
văn bản tự xuống dòng khi vượt chiều rộng phần tử chứa
pre-wrap khoảng trắng liên tục giữ nguyên. Tự xuống dòng
khi vượt chiều rộng phần tử chứa.
inherit : kế thừa thuộc tính white-space của phần tử cha

<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

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Đăng ký nhận bài viết mới

Thuộc tính white-space trong CSS

mtoplist