> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/that-may-nho-co-white-space-pre-line-doc-phan-18.md).
# Thật may nhờ có white-space: pre-line đọc (Phần 18)
#### 2. Thật may nhờ có `white-space: pre-line`
Thuộc tính `white-space` thì ai cũng đã từng dùng rồi, nhưng dùng chủ yếu nhiều nhất vẫn là 2 value này `normal` và `nowrap`.
* `normal`: mọi người thường dùng nó để reset về hành vi default, có thể do trước đó bị ảnh hưởng các value khác như `nowrap`.
* `nowrap`: thì thường được dùng nhiều nhất khi [truncate text 1 dòng hoặc nhiều dòng](https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-8-OeVKBDaJlkW#_1-cat-text-text-thanh-nhieu-dong-ma-khong-ton-chut-mo-hoi-nao-not-cross-browsers-0).
* Nhưng trường hợp mà mình gặp thì hơi đặc biệt 1 chút. Đó là data từ Backend trả về là 1 string, trong đó các đoạn text thể hiện kiểu ngắt dòng (bạn cứ tưởng tượng như kiểu nội dung của một câu hỏi gì đấy, được lấy ra từ `textarea` chẳng hạn).
Như hình trên các bạn thấy, thì mặc định trình duyệt nó sẽ biến 2 thứ là:
1. **line break**: là trường hợp mình đang gặp.
2. **extra white spaces**: chứa nhiều hơn 1 dấu cách.
\=> trở về bằng **one space** hết (1 space).
Vậy thay vì giải quyết bằng cách can thiệp phía Backend thêm vào tag `
`, thì thật là may mắn có bạn đã mách cho mình dùng thử `white-space: pre-line`.
Mình search ngay tài liệu và đọc, thì đúng chính xác value `pre-line` này, nó đã được tạo ra để xử lý trường hợp mình đang gặp phải các bạn ạ!
Ngoài ra `white-space` còn các value khác nữa, mỗi value sẽ cách áp dụng phù hợp để giải quyết các vấn đề khác nhau.
> **Browser Support:** BẠN YÊN TÂM
>
> `white-space` thì không phải là thuộc tính mới mẻ gì nữa cả, các bạn cứ thoải mái mà sử dụng ở các trình duyệt nhé!
>
>
**Đọc hiểu thêm**