Xử lý đoạn văn bản dài bằng CSS với thuộc tính text-overflow: ellipsis

Trước đây có bạn đã hỏi mình làm cách nào để xử lý một tiêu đề bài viết dài để không bị tràn ra ngoài hoặc xuống dòng cho đỡ phá vỡ bố cục của blog bạn ấy. Nhưng lúc đấy mình không biết làm cách nào ngoài cách hướng dẫn cho bạn ấy ẩn những chữ dài quá đi bằng thuộc tính text-overflow: hiden; . Hôm nay vô tình vào một trang web mình đã biết thêm thuộc tính nữa đó là text-overflow: ellipsis, thuộc tính này giúp cho đoạn văn bản dài khi gặp khung viền sẽ tự động thay thế những đoạn văn bản thừa thành dấu "..."

Chú ý: text-overflow: ellipsis chỉ làm việc cùng với thuộc tính overflow:hidden

Cấu trúc text-overflow: ellipsis

div{
    overflow:hidden;
    text-overflow:ellipsis;
    }

Ví dụ về text-overflow: ellipsis

Kết quả khi áp dụng text-overflow: hiden;
<p class="div1">Đừng khóc nếu không yêu anh em sẽ hạnh phúc Rất đau nhưng anh phải lạnh lùng Phải làm em tin rằng anh đã ko còn... như ngày xưa nữa Từ đó... dù cho bên ai cũng không hạnh phúc Nhận ra trong anh tình yêu ấy ko thể thay đổi Một ký ức đã từng rất đẹp, đã kết thúc khi em về bên ai Tìm đc nhau khó thế nào Điều gì đau lòng hơn mất em...</p>

Kết quả khi áp dung text-overflow: ellipsis
<p class="div2">Đừng khóc nếu không yêu anh em sẽ hạnh phúc Rất đau nhưng anh phải lạnh lùng Phải làm em tin rằng anh đã ko còn... như ngày xưa nữa Từ đó... dù cho bên ai cũng không hạnh phúc Nhận ra trong anh tình yêu ấy ko thể thay đổi Một ký ức đã từng rất đẹp, đã kết thúc khi em về bên ai Tìm đc nhau khó thế nào Điều gì đau lòng hơn mất em...</p>

.div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: hiden; 
    border: 1px solid #000000;
}

.div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

Kết quả khi áp dụng text-overflow: hiden;
Đừng khóc nếu không yêu anh em sẽ hạnh phúc Rất đau nhưng anh phải lạnh lùng Phải làm em tin rằng anh đã ko còn... như ngày xưa nữa Từ đó... dù cho bên ai cũng không hạnh phúc Nhận ra trong anh tình yêu ấy ko thể thay đổi Một ký ức đã từng rất đẹp, đã kết thúc khi em về bên ai Tìm đc nhau khó thế nào Điều gì đau lòng hơn mất em...
Kết quả khi áp dung text-overflow: ellipsis
Đừng khóc nếu không yêu anh em sẽ hạnh phúc Rất đau nhưng anh phải lạnh lùng Phải làm em tin rằng anh đã ko còn... như ngày xưa nữa Từ đó... dù cho bên ai cũng không hạnh phúc Nhận ra trong anh tình yêu ấy ko thể thay đổi Một ký ức đã từng rất đẹp, đã kết thúc khi em về bên ai Tìm đc nhau khó thế nào Điều gì đau lòng hơn mất em...