Các thẻ pre đáp ứng trong CSS

Tôi đã gặp một số vấn đề với khả năng phản hồi trong một vài bài đăng trên blog của mình. Hóa ra đó là các đoạn mã

Tôi đã gặp một số vấn đề với khả năng phản hồi trong một vài bài đăng trên blog của mình.

Hóa ra những bài đăng tôi gặp sự cố, chúng đều có đoạn mã vượt quá chiều rộng trang bình thường mà không có khoảng trắng.

Ví dụ

cd /some/super/long/super/long/folder

hoặc bất kỳ lệnh rất dài nào khác.

Các đoạn mã trên blog của tôi đều được tự động thêm vào bên trongcodevà bên trong nó thành mộtprenhãn.

Theo mặc định, CSSwhite-spacetài sản trênprethẻ được đặt thànhnormalvà để khắc phục sự cố này, chúng tôi đặt nó thànhpre-wrap:

pre {
  white-space: pre-wrap;
}

Khi một số từ quá dài, chúng vẫn có thể phá vỡ bố cục. Để khắc phục điều này, hãy thêm:

pre {
  word-break: break-all;
}

Tải xuống miễn phí của tôiSổ tay CSS