Giới hạn chiều rộng và chiều cao của đoạn văn bản sử dụng CSS

Thông thường JavaScript hoặc các ngôn ngữ kịch bản chạy trên server như PHP, Ruby sẽ được sử dụng khi chúng ta cần giới hạn chiều rộng và chiều cao của dòng văn bản. Ví dụ như giới hạn số lượng ký tự hoặc số lượng từ của đoạn văn bản dùng tóm tắt nội dung bài viết. Trong một số trường hợp khác chúng ta cũng muốn giới hạn số lượng ký tự, từ của ngay cả tiêu đề bài viết nếu như nó quá dài.

Ở bài viết này chúng ta sẽ viết code CSS để thực hiện việc giới hạn chiều rộng và chiều cao của một dòng tóm tắt ví dụ của một bài viết như sau:

<div class="post-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga odio iusto quae nulla, deleniti, quas pariatur voluptate ipsum vitae beatae?</div>

Sẽ cần được rút ngắn lại thành:

<div class="post-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga odio iusto quae nulla...</div>

Phương pháp giới hạn độ dài của dòng thông qua các ngôn ngữ server được thực hiện thông qua giới hạn số lượng ký tự hoặc từ . Ưu điểm của phương pháp này đó là chúng ta kiểm soát được số lượng từ hoặc ký tự sẽ xuất hiện tuy nhiên nhược điểm của phương pháp này đó là chúng ta không thể kiểm soát được độ rộng của phần tử <div> khi nó được hiển thị trên trình duyệt.

Giới Hạn Độ Rộng Của Dòng

Trường hợp này sử dụng CSS sẽ giúp chúng ta có thể kiểm soát được độ rộng của phần tử <div>.

Để giới hạn độ rộng của phần tử <div> trên để sao cho phần tử này có độ rộng không quá 200px chúng ta làm như sau:

div.post-summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-awidth: 200px;
}

Tuy nhiên phương pháp này cũng có điểm hạn chế riêng của nó đó là chúng ta không thể kiểm soát được có bao nhiêu ký tự sẽ được xuốt hiện. Trong một số ngôn ngữ như tiếng Việt thì điều này có thể gây ra rắc rối. Ví dụ như trước đây đã có một bài viết trên trang báo online nổi tiếng của Việt Nam 24h.com mà đoạn tóm tắt có câu ...lồng tiếng.. Và cũng thật tình cờ là đoạn tóm tắt được cắt ngay trước chữ g đã gây ra sự phản cảm cho một số lượng lớn người đọc.

Do đó bạn cần cân nhắc kỹ lưỡng khi sử dụng CSS để giới hạn độ rộng của dòng văn bản.

Giới Hạn Độ Cao Của Dòng

Để giới hạn độ cao của dòng bạn cần sử dụng box-flex. Ví dụ để giới hạn độ cảo của dòng tóm tắt tối đa là 3 dòng chúng ta sẽ làm như sau:

div.post-summary {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Với đoạn code trên bạn cũng cần lưu ý rằng box-flex là không phải là một chuẩn giống như Flexible Box Layout. Tuy nhiên hiện tại box-flex vẫn được các trình duyệt phổ biến hỗ trợ.