[Hướng dẫn] giới hạn ký tự tiêu đề dài và thêm (...) ở cuối

  • blogger
    Dạo qua BlogspotBloggerCommunity có thím ‎Thỏ Sạch Sóc Sơn‎ hỏi về cắt ký tự dài . Tiện đây hướng dẫn vào đây cho bạn ý dễ hình dung.



    VD:

    Code:
    <a href="url"><span style="padding: 5px;" class="label_title">cộng đồng hotrofm</span></a>

    <h2>Cách 1 sử dụng script</h2>

    Code:
    <script>$(".label_title").each(function(){if ($(this).text().length > 50) {$(this).text($(this).text().substr(0, 50));$(this).append('...');}});</script>

    <h2>Cách 2 sử dụng css</h2>
    Với trường hợp này ta dùng css như sau

    Code:
    .label_title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    }

    Trong đó -webkit-line-clamp: 2; là số dòng là 2


    VD: Ở đây ta thấy label_title ở website thỏ của bác ấy thì ta chỉ cần đổi class là dc thôi



    Code:
    .label_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 350px;
    }


    Khi đã thay class trùng với class của các bạn thì các bạn vào Chủ đề cho vào phần

    Code:
    <style type='text/css'>........</style>


Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết