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ước | Sau khi xử lý | 
| -------- | -------- | 
| ![Ảnh chụp Màn hình 2021-03-13 lúc 11.34.51.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%2F11%2F34%2F51%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-63486-1615610099996_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2011.34.51.png?alt=media&token=68bf8585-2fe7-4915-8ce2-189b19c8e2a9)     | ![Ảnh chụp Màn hình 2021-03-13 lúc 11.45.08.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%2F11%2F45%2F08%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-73884-1615610713707_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2011.45.08.png?alt=media&token=fc3ffc7c-039a-42cc-bbe0-cad0d0d89824) | 

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.

2. 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ý | 
| -------- | -------- | 
|![Ảnh chụp Màn hình 2021-03-13 lúc 11.56.53.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%2F11%2F56%2F53%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-72672-1615611418806_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2011.56.53.png?alt=media&token=ba7acf7d-199b-4a7a-9764-c1708f2bd586)|![Ảnh chụp Màn hình 2021-03-13 lúc 11.58.55.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%2F11%2F58%2F55%2Fpng-o9-10-p3-10-o0-10-o0-10-1d-1d-10-o1-10-1e-1e-1e-image%2Fpng-86608-1615611546212_A%CC%89nh%20chu%CC%A3p%20Ma%CC%80n%20hi%CC%80nh%202021-03-13%20lu%CC%81c%2011.58.55.png?alt=media&token=a819305d-0104-470b-acb5-ec7693625d40) | 

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

3. 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

![Ảnh chụp Màn hình 2021-03-13 lú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)
Trong trường hợp này mình có thể dùng overflow-wrap để nội dung tự xuống dòng
![Ảnh chụp Màn hình 2021-03-13 lú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


![Ảnh chụp Màn hình 2021-03-13 lú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)
