CLASSFUNC BLOG
We Share Our Knowledge
Xử lý css khi nội dung bị tràn ra ngoài
Front-end
Mai Văn Thiết
13 Th03 2021 05:27
  1. Khi muốn nội dung nằm trên 1 hàng, phần thừa sẽ thay bằng dấu 3 chấm
TrướcSau khi xử lý
Ảnh chụp Màn hình 2021-03-13 lúc 11.34.51.png
Ảnh chụp Màn hình 2021-03-13 lúc 11.45.08.png

Trong đó: white-space: nowrap để nội dung hiển thị trên cùng 1 hàng. overflow: hidden để phần nội dung thừa ra ngoài bị ẩn đi. text-overflow: ellipsis thay thể phần nội dung đã ẩn đi bằng dầu 3 chấm.

  1. Khi muốn nội dung nằm trên nhiều hàng, phần nội dung thừa thay thế bằng dấu 3 chấm
TrướcSau khi xử lý
Ảnh chụp Màn hình 2021-03-13 lúc 11.56.53.png
Ảnh chụp Màn hình 2021-03-13 lúc 11.58.55.png

Khi dùng cách này thì phần nội dung không được để padding

  1. Xử lý khi nội dung là 1 đường link hay 1 đoạn text quá dài, không có dấu cách, không tự xuống dòng được và bị tràn ra ngoài

Ảnh chụp Màn hình 2021-03-13 lúc 12.16.25.png
Trong trường hợp này mình có thể dùng overflow-wrap để nội dung tự xuống dòng
Ảnh chụp Màn hình 2021-03-13 lúc 12.20.49.png

Hoặc sử dụng hyphens để thêm dấu gạch nối và xuống dòng

Ảnh chụp Màn hình 2021-03-13 lúc 12.24.04.png