7.7.22

Xử lý đoạn văn bản dài bằng CSS

Nội Dung Chính [Ẩn] [Hiển thị]
    Ở bài viết trước, mình đã hướng dẫn Cắt list danh sách dài với CSS. Vậy làm cách nào để xử lý đoạn văn bản dài theo chiều ngang? Anh em chỉ cần làm theo bài này là ok

    Hướng dẫn

    Cấu trúc CSS
    .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;
    }
    Áp dụng cho đoạn HTML sau
    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>
    Ta sẽ được
    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...

    Bạn đang xem bài viết "Xử lý đoạn văn bản dài bằng CSS" tại chuyên mục: CSS , HTML
    Xem thêm