Cascading Style Sheets

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


<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

Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản

Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản

Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản


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