Hôm nay, trong lúc làm Website, thì Liêm phát hiện ra 1 lỗi nhỏ khiến quá trình độc của người dùng bị ảnh hưởng, đó là lỗi văn bản chứa liên kết tràn màn hình điện thoại. Hãy cùng Liêm tìm cách fix lỗi này nhé.
Cách fix lỗi văn bản bị tràn màn hình trên Mobile
Để fix lỗi này, bạn hãy xem xét lỗi này có giống như của Liêm đang bị không nhé.
Nếu đúng là bị lỗi như của Liêm đang bị, thì các bạn hãy CSS lại cho nội dung đó bằng cách thêm đoạn CSS sau:
.entry-content a{word-break: break-all;}Giải thích:
- Class .entry-content tức là class của nội dung bài viết
- Còn “A” tức là thuộc tính thẻ sẽ CSS, hãy thay A thành Span hoặc B hoặc Strong hoặc bất kỳ thẻ nào bị lỗi bạn nhé.
Lưu ý, đoạn CSS này là dùng cho giao diện Flatsome, nếu bạn dùng Theme khác thì hãy Inspect theme xem Class chính của bài viết là gì, để điều chỉnh CSS của thẻ A cho đúng nhé.
Liêm MKT hy vọng, bài viết này sẽ có ích và giúp bạn khắc phục được lỗi văn bản bị tràn ra khỏi màn hình trên giao diện di động trong bài viết nhé.
Rất thiết thực ạ