- 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ước | Sau khi xử lý |
---|---|
![]() | ![]() |
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.
- 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ước | Sau khi xử lý |
---|---|
![]() | ![]() |
Khi dùng cách này thì phần nội dung không được để padding
- 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](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F12%2F16%2F25%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-83982-1615612590697_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2012.16.25.png?alt=media&token=e9d95d1f-28e7-4ff3-a10e-3a2b16e88c3e)
![Ảnh chụp Màn hình 2021-03-13 lúc 12.20.49.png](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F12%2F20%2F49%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-90676-1615612855210_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2012.20.49.png?alt=media&token=61aba76c-1a2a-4010-9ba7-fcfcf869243c)
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](https://firebasestorage.googleapis.com/v0/b/classfunc-com.appspot.com/o/blogs%2Falbums%2Fuppy-a%2Fnh%2Fchu%2Fp%2Fma%2Fn%2Fhi%2Fnh%2F2021%2F03%2F13%2Flu%2Fc%2F12%2F24%2F04%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-88974-1615613050307_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2012.24.04.png?alt=media&token=dc3c23b0-3d56-47ab-a6c5-014ff34b7e9e)