Cách giới hạn dòng văn bản chỉ bằng CSS
Giới hạn số lượng văn bản trong một phần tử là một yêu cầu thiết kế web phổ biến. Bạn sẽ thường thấy một bài báo có đoạn trích dài ba hoặc bốn dòng với một nút cho phép bạn mở rộng toàn văn.
Bạn có thể tạo thiết kế này bằng cách sử dụng kết hợp CSS và JavaScript. Nhưng bạn cũng có thể làm như vậy chỉ bằng CSS. Khám phá hai cách giới hạn văn bản trong hộp và cách bạn có thể tạo nút mở rộng động chỉ bằng CSS.
Mục Lục
Kỹ thuật Webkit
Tạo một thư mục trống và chỉnh sửa hai tệp bên trong nó: index.html Và phong cách.css. Bên trong index.html tệp, hãy tạo bộ xương HTML:
<!DOCTYPE html>
<html lang="en"><head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Một liên kết trong <đầu> phần, đến phong cách.css tệp, đảm bảo rằng bất kỳ CSS nào bạn thêm vào tệp đó sẽ áp dụng cho trang này. Tiếp theo, dán đánh dấu HTML sau vào trong thẻ trong index.html:
<section class="card-group">
<article class="card">
<h2>Article 1</h2> <p class="cuttoff-text">
300-word text goes here
</p>
<input type="checkbox" class="expand-btn">
</article>
<article class="card">
<h2>Article 2</h2>
<p class="cuttoff-text">
200-word text goes here
</p>
<input type="checkbox" class="expand-btn">
</article>
<article class="card">
<h2>Article 1</h2>
<p class="cuttoff-text">
100-word text goes here
</p>
<input type="checkbox" class="expand-btn">
</article>
</section>
Cấu trúc của HTML này đơn giản nhưng nó vẫn sử dụng đánh dấu ngữ nghĩa cho khả năng truy cập. Phần tử phần chứa ba phần tử bài viết. Mỗi bài viết bao gồm một tiêu đề, một đoạn văn, và một yếu tố đầu vào. Bạn sẽ sử dụng CSS để định kiểu từng phần bài viết thành một thẻ.
Trong khi chờ đợi, trang của bạn sẽ trông như thế này:
Từ hình trên, bạn có thể thấy độ dài khác nhau của văn bản trong mỗi đoạn văn. 300 từ trong lần đầu tiên, 200 từ trong lần thứ hai và 100 từ trong lần thứ ba.
Bước tiếp theo là bắt đầu tạo kiểu cho trang bằng cách thêm CSS vào phong cách.css tài liệu. Bắt đầu bằng cách đặt lại đường viền trên tài liệu và tạo màu nền cho phần thân là màu trắng:
*, *::before, *::after {
box-sizing: border-box;
}body {
background: #f3f3f3;
overflow: hidden;
}
Tiếp theo, biến phần tử có lớp card-group thành một grid container có ba cột. Mỗi phần bài viết chiếm một cột:
.card-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
align-items: flex-start;
}
Tạo kiểu cho từng phần bài viết dưới dạng thẻ có màu nền trắng và đường viền hơi tròn màu đen:
.card {
background: white;
padding: 1rem;
border: 1px solid black;
border-radius: .25em;
}
Cuối cùng, thêm một số lề:
h2, p {
margin: 0;
}h2 {
margin-bottom: 1rem;
}
Lưu tệp và kiểm tra trình duyệt của bạn. Trang này sẽ giống như trang được hiển thị trong hình bên dưới:
Bước tiếp theo là cắt số dòng cho mỗi văn bản xuống còn 3. Đây là CSS cho điều đó:
.cuttoff-text {
--max-lines: 3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--max-lines);
}
Bắt đầu bằng cách đặt biến CSS, dòng tối đa, thành 3 và ẩn nội dung tràn. Sau đó đặt màn hình thành -webkit-box và kẹp dây thành 3.
Hình ảnh sau đây cho thấy kết quả. Mỗi thẻ hiển thị một hình elip trên dòng văn bản thứ ba:
Kỹ thuật này có thể khá khó khăn để thực hiện. Nếu bạn bỏ qua bất kỳ tài sản nào thì mọi thứ sẽ bị phá vỡ. Một nhược điểm khác là bạn không thể sử dụng thuộc tính hiển thị ngoài –webkit-hộp. Ví dụ, bạn có thể muốn sử dụng Grid hoặc Flexbox. Vì những lý do này, kỹ thuật sau đây là tốt hơn.
Một cách tiếp cận linh hoạt hơn để giới hạn số dòng trong văn bản
Kỹ thuật này cho phép bạn làm điều tương tự như cách tiếp cận webkit, với kết quả tương tự. Nhưng sự khác biệt lớn là bạn có rất nhiều sự linh hoạt vì bạn đang tự thiết lập chiều cao. Ngoài ra, bạn có thể sử dụng bất kỳ thuộc tính hiển thị nào hoặc bất kỳ tùy chọn kiểu dáng nào bạn thích.
Để bắt đầu, hãy thay thế khối CSS cho .cutoff-text Với cái này:
.cuttoff-text {
--max-lines: 5;
--line-height: 1.4;
height: calc(var(--max-lines) * 1em * var(--line-height));
line-height: var(--line-height);
position: relative;
}
Đặt chiều cao của dòng rất quan trọng vì bạn cần tính đến nó khi xác định chiều cao của mình. Để có chiều cao, bạn nhân chiều cao của dòng với cỡ chữ và số dòng.
chúng tôi thêm vị trí: họ hàng vì chúng tôi cần nó để thêm hiệu ứng mờ dần. Thêm CSS sau để hoàn thành hiệu ứng:
.cuttoff-text::before {
content: "";
position: absolute;
height: calc(2em * var(--line-height));
width: 100%;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent, white);
}
CSS ở trên làm mờ dòng văn bản cuối cùng trong mỗi thẻ. Bạn có thể đạt được hiệu ứng mờ dần bằng cách sử dụng lý lịch thuộc tính và một gradient. Bạn phải thiết lập sự kiện con trỏ ĐẾN không có để đảm bảo rằng phần tử không thể chọn được.
Đây là kết quả:
Kỹ thuật này đạt được kết quả tương tự như kỹ thuật trước (cộng với độ mờ ở cuối). Nhưng bạn sẽ linh hoạt hơn khi sử dụng các loại bố cục và thiết kế khác.
Thêm nút Mở rộng và Thu gọn Động
Việc thêm nút mở rộng/thu gọn giúp thẻ thực tế và tương tác hơn. Với mẫu này, bạn mở rộng nội dung bằng cách nhấp vào Mở rộng nút, sau đó văn bản thay đổi thành Sụp đổ. Vì vậy, văn bản của nút sẽ chuyển đổi giữa “Mở rộng” và “Thu gọn” khi bạn nhấp vào nút đó. Hơn nữa, phần còn lại của nội dung hiển thị và ẩn trong từng trạng thái tương ứng.
Bạn đã xác định một đầu vào phần tử trong HTML của bạn. Phần tử này sẽ đóng vai trò là nút của bạn. Để định kiểu đầu vào này thành một nút, hãy đưa CSS sau vào biểu định kiểu của bạn:
.expand-btn {
appearance: none;
border: 1px solid black;
padding: .5em;
border-radius: .25em;
cursor: pointer;
margin-top: 1rem;
}
Khi bạn di chuột vào nút, bạn muốn thay đổi màu nền:
.expand-btn:hover {
background-color: #ccc;
}
Bây giờ CSS để chuyển đổi văn bản khi đầu vào được kiểm tra:
.expand-btn::before {
content: "Expand"
}.expand-btn:checked::before {
content: "Collapse"
}
Bây giờ khi bạn nhấp vào nút/đầu vào, văn bản sẽ chuyển từ Mở rộng ĐẾN Sụp đổ. Nhưng bản thân nội dung sẽ chưa mở rộng. Để làm như vậy khi bạn nhấp vào nút, hãy thêm CSS sau:
.cuttoff-text:has(+ .expand-btn:checked) {
height: auto;
}
Ví dụ này sử dụng bộ chọn CSS has() để nhắm mục tiêu phần tử. Với mã này, bạn đang nói rằng nếu vùng văn bản bị cắt có nút mở rộng được chọn, thì chiều cao của thẻ phải là tự động (mở rộng nó).
Đây là kết quả:
Các mẹo và thủ thuật CSS khác để tìm hiểu
Bài viết này trình bày hai phương pháp khác nhau để giới hạn số dòng trong hộp bằng CSS. Chúng tôi thậm chí đã thêm một nút để mở rộng/thu gọn nội dung mà không cần viết một dòng JavaScript nào.
Nhưng có rất nhiều mẹo và thủ thuật khác trong CSS. Những mẹo này cung cấp cho bạn một cách sáng tạo để đạt được bố cục mong muốn mà không ảnh hưởng đến hiệu suất, khả năng đọc hoặc khả năng truy cập.