Cách làm Pre Tags 100% Responsive trong CSS

Tìm hiểu cách nhanh chóng làm HTML pre tags 100% responsive bằng cách thêm vài CSS properties.

Vấn đề tôi thường thấy trên các tutorial website khác là code snippets dài (được wrap bởi tag pre) tràn chiều rộng trang, làm layout vỡ.

Điều này xảy ra vì mặc định pre tags có CSS property white-space set thành normal, như sau:

pre { white-space: normal; }

Để fix issue, bạn chỉ cần đổi normal thành pre-wrap:

pre { white-space: pre-wrap; }

Đây là cải tiến lớn, nhưng chưa giải quyết hoàn toàn overflow issue, vì pre-wrap chỉ xử lý whole lines of code (tập hợp code terms trên một dòng, tách bằng white space).

Điều gì xảy ra nếu individual words trong code lines quá dài, vượt quá chiều rộng trang?

Layout vẫn vỡ, vì pre-wrap không xử lý individual words.

Ví dụ tốt là directory path, dễ vượt quá 50 ký tự, quá rộng cho nhiều layout, đặc biệt mobile. Ví dụ từ máy tôi:

cd /Users/david/Dev/techstacker/content/posts/how-to-make-seo-friendly-urls/how-to-make-seo-friendly-urls.md

Vì không có white space giữa các từ trong dòng trên, trình duyệt đọc nó là một từ dài. Nếu có space giữa từ, nó wrap ngon lành nhờ pre-wrap. Nhưng nó đọc như một từ dài.

Để fix issue này, thêm CSS property khác cho pre tag, tên word-break, giá trị break-all. Như sau:

pre { white-space: pre-wrap; word-break: break-all; }

Bây giờ pre tags của bạn 100% responsive.