Hỏi về cách xử lý tràn kí tự hiển thị khi làm web

Chào mọi người! Hiện em đang cố gắng hiện thực một web app Comment bằng Reactjs. Nhưng em lại gặp một vấn đề đó là khi nhập vào dòng bình luận quá dài thì khi hiển thị dòng bình luận nó sẽ bị tràn như hình! Em xin hỏi mọi người làm sao để nó có thể tự động xuống dòng mà không bị tràn nửa ạ! Em cám ơn!



CSS: word-wrap: break-word;

4 Likes

cách này khi em dùng với một chuỗi string có sẵn thì nó hiển thị đúng! Nhưng khi dùng với chuỗi string chứa trong biến cụ thể là biến {temp} với bài trên thì nó vẩn bị lỗi tràn ạ @@ Anh chị có cách nào khác không ạ :((

Ngay sau khi hiển thị chuỗi thì dùng JavaScript thay đổi CSS thành break-word và break-all ngay để nó có dài ra thì bị xén lại.

.example { overflow-wrap: break-word; }
2 Likes

Anh chị có thể nói rõ hơn không ạ! cụ thể là biến {temp} ở hình trên là biến chứa chuỗi string thì mình xử lý sao ạ! Em chỉ mới tìm hiểu về phần này hơn 1 tuần nên anh/ chị thông cảm ạ!

Khoản này là ở xử lý HTML - CSS - Javascript của trình duyệt, đâu còn liên quan đến Reactjs nữa.

Trừ khi biến {temp} kia chứa cả HTMLCSS từ Reactjs để ngăn việc ngắt dòng.
Bạn dùng chức năng Kiểm tra phần tử (Inspector) hoặc Xem nguồn (View source) của trình duyệt để xem CSS của nó.

Em đã làm được! Em cám ơn nhiều ạ!!!:sweat_smile:

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?