Tìm hiểu cách nhanh chóng làm cho các thẻ trước HTML của bạn đáp ứng 100% bằng cách thêm một vài thuộc tính CSS.
Một vấn đề mà tôi thường thấy trên các trang web hướng dẫn khác là các đoạn mã dài (được bao bọc bởi pre ) làm tràn chiều rộng của trang và khiến bố cục trang của chúng bị hỏng.
Điều này xảy ra vì theo mặc định pre các thẻ có CSS white-space thuộc tính được đặt thành normal , như thế này:
pre {
white-space: normal;
}
Để khắc phục sự cố, bạn chỉ cần thay đổi normal thành pre-wrap :
pre {
white-space: pre-wrap;
}
Đây là một cải tiến tuyệt vời, nhưng điều này không giải quyết được hoàn toàn vấn đề tràn, vì pre-wrap chỉ giải quyết toàn bộ các dòng mã (tập hợp các thuật ngữ mã trên một dòng, được phân tách bằng khoảng trắng).
Điều gì xảy ra nếu các từ riêng lẻ trong các dòng mã của bạn dài đến mức vượt quá chiều rộng của trang?
Sau đó, bố cục của bạn vẫn bị hỏng, bởi vì pre-wrap không giải quyết các từ riêng lẻ.
Một ví dụ điển hình là đường dẫn thư mục, có thể dễ dàng dài hơn 50 ký tự, quá rộng đối với nhiều bố cục, đặc biệt là trên thiết bị di động. Đây là một ví dụ từ máy tính của riêng 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ó khoảng trắng giữa các từ ở dòng trên nên nó được đọc là một từ dài của trình duyệt của bạn. Nếu nó được phân tách bằng dấu cách giữa mỗi từ, nó sẽ hoàn toàn tốt vì có pre-wrap tài sản mà chúng ta vừa thảo luận. Nhưng nó được đọc là một từ dài.
Để khắc phục sự cố này, chúng tôi thêm một thuộc tính CSS khác vào thẻ trước, được gọi là word-break và đặt cho nó một giá trị là break-all . Như thế này:
pre {
white-space: pre-wrap;
word-break: break-all;
}Giờ đây, các thẻ trước của bạn đáp ứng 100%.