Cắt ngắn chuỗi chỉ với CSS - Truncate text with CSS

Giới thiệu

Hẳn các bạn trong quá trình đổ dữ liệu từ backend về frontend cũng gặp trường hợp này. Đó là khi ta sử dụng dữ liệu không cố định độ dài chuỗi như: tiêu đề bài viết, khóa học,... sẽ khiến phần giao diện của chúng ta nhìn không đẹp mắt.

Dưới đây là một ví dụ:

Như các bạn có thể thấy ở hình trên mình có danh sách các khóa học và dữ liệu được lấy từ database. Chúng ta thấy có nhiều khoảng trắng dư thừa ở dưới mỗi khóa học. Lí do xảy ra chuyện này vì chiều dài tiêu đề mỗi khóa học là khác nhau.

Để xử lí trường hợp này chúng ta có thể giới hạn chiều dài cho tiêu đề, hoặc có thể sử dụng Truncate cho chuỗi tiêu đề 😁. Đây là cách mình xử lí cắt ngắn chuỗi chỉ với CSS. Cùng theo dõi nhé !

Mình sẽ tạo sẵn 1 khóa học với tiêu đề định sẵn như sau:

<div class="course-item">
  <a href="">
    <div class="thumbnail">
      <img src="./public/img/thumbnail/Attachment_1.png" alt="" />
    </div>
  </a>
  <div class="info">
    <div class="title">
      <a href="">
        Build Responsive Real World Websites with HTML5 and CSS3
      </a>
    </div>
    <div class="authors"></div>
    <span class="price">$195.99</span>
  </div>
  <!-- end info -->
</div>

Ta sẽ được như sau:

Tiếp theo để Truncate chúng ta sẽ sử dụng các thuộc tính có sẵn của CSS và trong trường hợp này, mình sẽ xử lí cho class title ở Trên.

Để tránh khó nhìn mình sẽ bỏ qua các phần style không cần thiết và chỉ sử dụng thuộc tính cần thiết để có thể Truncate.

Ta sử dụng 4 dòng style cho title như sau:

.title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Thuộc tính line-clamp sẽ Truncate văn bản với số lượng dòng cụ thể. Mình đặt là 2 thì nếu nhiều hơn 2 dòng sẽ kích hoạt truncate. Thuộc tính này sẽ chỉ hoạt động nếu có thêm các thuộc tính sau:

• Thuộc tính display là -webkit-box hoặc -webkit-inline-box
• Thuộc tính -webkit-box-orient là vertical

Kết quả chúng ta được như sau:

Ở hình trên sau khi thêm các thuộc tính trên ta thấy tiêu đề đã được Truncate và dấu 3 chấm đã xuất hiện. Nhưng các từ bị ẩn đi chúng vẫn xuất hiện và nhìn còn tệ hơn ban đầu 😂. Để fix bug thì ta chỉ cần thêm overflow: hidden vào là được.

Cùng xem thành quả nhé:

Một trick nữa mình muốn giới thiệu trong bài này đó là nếu người dùng muốn xem chi tiết tiêu đề ta có thể sử dụng thuộc tính title vào thẻ mà người dùng hover vào (Đặt title vào phần tử ta đã thực hiện Truncate để khi hover sẽ hiển thị cả phần văn bản bị ẩn đi).

Kết bài

Như vậy là mình đã giới thiệu cho các bạn cách để chúng ta có thể xử lí cắt chuỗi văn bản một cách đơn giản. Hy vọng các bạn sẽ thực hiện thành công 😁.

Have a nice day !!!