Hướng dẫn cắt chuỗi html

Đã đăng vào thg 5 20, 2019 3:25 SA 2 phút đọc

Giới thiêu:

Bạn có thể đã thấy các trang web hiện nay sẽ có nhưng đoạn văn bản cắt ngắn để giữ bố cục chặt chẽ và được sắp xếp gọn gàng. Để làm việc này ngoài việc sử dung sử dụng JavaScript hoặc một số phương pháp phức tạp hoặc các thư viện bên ngoài, ta có sử dụng CSS3 để có thể cắt văn bản đơn giản, và khá là hiêu quả. Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách dễ dàng cắt ngắn chuỗi văn bản một cách nhanh chóng .

Cách làm:

- Bước 1: chúng ta sẽ tạo một phần tử HTML để đặt văn bản muốn cắt bớt nội dung bên trong.

Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 

- Bước 2: Sử dụng CSS

p {
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
    -webkit-line-clamp: 3;
    height: 60px;
     display: -webkit-box;
    -webkit-box-orient: vertical;
}

Giải thích:

• width: 500px : giới hạn chiều rộng của thẻ bao bên ngoài đoạn văn bản.
• overflow: hidden: khi content bên trong có kích thước quá thẻ bao bên ngoài sẽ bị ẩn đi.
• text-overflow: ellipsis: sẽ thêm "..." vào cuối đoạn văn bản khi bị cắt.
• line-height: 20px: Set line-height cho đoạn văn bản
• -webkit-line-clamp:3: Số dòng text hiển thị
• height: 60px: Set chiều cao cho đoạn văn bản theo công thức: height = line-height * line-clamp
• -webkit-box-orient: vertical :thuộc tính thiết lập nội dung của nó theo chiều ngang hay chiều dọc.
• display: -webkit-box: để thuộc tính -webkit-box-orient hoạt động bạn phải chọn display : box hoặc inline-box.

Như vậy chúng ta sẽ có đoạn văn bản khi độ dài của đoạn văn bản > độ dài của thẻ bao bên ngoài sẽ xuất hiện dấu … như demo bên dưới

*Chú ý: Hạn chế của cách này đó là không hỗ trợ trên toàn bộ các trình duyêt hiện tại như Firefox và IE

- Cách 2: Tôi xin giới thiêu các bạn các thứ 2 . Cách này sử dụng :after để taọ ra background gradients ở cuối đoạn văn , khi đoạn văn bản dài quá sẽ bị che bởi lớp gradient này tạo ra hiệu ứng text mờ dần thay vì bị mất hẳn text sẽ khá xấu.

HTML:

p {
    display: block;
    width: 500px;
    overflow: hidden;
    line-height: 25px;
    height: 75px;
    position: relative
}

CSS:

p:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 25px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
}

Kết luận

Như vậy tôi đã giới thiệu với các bạn 2 các thực hiện để cắt chuối văn bản trên nhiều dòng bằng cách chỉ sử dụng CSS3 sao cho đơn giản và hiêu quả nhất.

Chúc các bạn thành công !

All rights reserved

Đã đăng vào thg 8 24, 2017 12:02 CH 1 phút đọc

Để giới hạn số kí tự trong một đoạn văn bản, chúng ta thường xử lý bằng các ngôn ngữ lập trình phía Server hoặc dùng Javascript phía Client. Trong bài viết này mình giới thiệu tới các bạn một cách khác, đó là sử dụng thuộc tính text-overflow trong CSS.

Cú pháp dùng để cắt chuỗi trên 1 dòng:

p {
    width: 500px;
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
}

Giải thích code một chút:

• white-space: nowrap: Ngăn k cho đoạn văn bản xuống dòng
• overflow: hidden: Ẩn đoạn text bị thừa
• text-overflow: ellipsis: Cắt một đoạn text và thay thế bằng dấu ... Kết quả

Cú pháp dùng để cắt chuỗi trên nhiều dòng:

p {
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 3;
    height: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

• line-height: 25px: Set line-height cho đoạn văn bản
• -webkit-line-clamp:3: Số dòng text hiển thị
• height: 75px: Set chiều cao cho đoạn văn bản. height = line-height * line-clamp Kết quả

Mong rằng bài viết này có ích cho các bạn !

All rights reserved