Thật may nhờ có white-space: pre-line đọc (Phần 18)

https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-18-bWrZnxvv5xw

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.

• 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 <br />, 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é!

https://caniuse.com/#search=white-space

Đọc hiểu thêm