Thủ thuật blogger dùng css cắt chuỗi tiêu đề cho blogspot

[tintuc]

Thủ thuật blogger dùng CSS cắt chuỗi tiêu đề cho blogspot, sử dụng cách này chúng ta có thể cắt chuỗi văn bản của tiêu đề bài viết thành 1 hàng, 2 hàng hoặc 3 hàng.

Áp dụng cho trường hợp tiêu đề bài viết hoặc đoạn văn của blog trang web quá dài, thì bạn có thể sử dụng cách sau:

Cách 1: Cắt tiêu đề hoặc đoạn văn chỉ nằm trên 1 dòng

.catchuoi1hang {
    overflow: hidden;   // Ẩn tiêu đề hoặc đoạn văn bản bị thừa
    white-space: nowrap;  // Không cho tiêu đề hoặc đoạn văn xuống dòng
    text-overflow: ellipsis;  // Thay tiêu đề hoặc đoạn văn bản bị thừa bằng dấu 3 chấm ...
}

Tùy vào từng bố cục html, bạn có thể thêm width cho nó.. nếu cần thiết

.catchuoi1hang  {
    overflow: hidden;   // Ẩn tiêu đề hoặc đoạn văn bản bị thừa
    white-space: nowrap;  // Không cho tiêu đề hoặc đoạn văn xuống dòng
    text-overflow: ellipsis;  // Thay tiêu đề hoặc đoạn văn bản bị thừa bằng dấu 3 chấm ...
    width: 600px;
}

Cách 2 : Cắt tiêu đề hoặc đoạn văn bản thành nhiều hàng

.catchuoinhieuhang {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 3; // Số hàng của tiêu đề hoặc đoạn văn muốn hiển thị
    height: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 600px;
}

Tùy vô bố cục của từng html của blog, các bạn chỉnh các thông số màu đỏ cho phù hợp...

[/tintuc]