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

<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>

???

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>