Không có gì bí mật mà MDN tung ra một thiết kế mới trở lại vào tháng Ba. Nó tuyệt đẹp! Và có một số viên ngọc CSS-y ngọt ngào trong đó rất thú vị khi nhìn vào. Một trong những điểm quý đó là cách các thành phần thẻ xử lý văn bản bị cắt ngắn.
Khá tuyệt, phải không? Tôi muốn tách nó ra chỉ trong một chút, nhưng có một số điều thực sự thu hút tôi vào cách tiếp cận này:
- Đó là một ví dụ về việc cố ý cắt bỏ nội dung. Chúng tôi đã gọi nó là Mất dữ liệu CSS ở những nơi khác. Và trong khi mất dữ liệu nói chung là một điều tồi tệ, tôi thích cách nó được sử dụng ở đây vì các đoạn trích được coi là một đoạn giới thiệu cho toàn bộ nội dung.
- Điều này khác với việc cắt bớt văn bản bằng
text-overflow: ellipsis, một chủ đề mới xuất hiện gần đây khi Eric Eggert chia sẻ mối quan tâm của mình với nó. Lập luận chính chống lại nó là không có cách nào để khôi phục văn bản bị cắt trong đoạn cắt - công nghệ hỗ trợ sẽ thông báo nó, nhưng những người dùng bị mất trí nhớ không có cách nào để khôi phục nó. Cách tiếp cận MDN cung cấp nhiều quyền kiểm soát hơn trong bộ phận đó vì việc cắt bớt chỉ là hình ảnh.
Vậy MDN đã làm điều đó như thế nào? Không có gì quá lạ mắt ở đây khi HTML đi xa, chỉ là một vùng chứa với một đoạn văn.
<div class="card">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>Chúng ta có thể bổ sung một số kiểu cơ bản để củng cố mọi thứ.
Một lần nữa, không có gì quá lạ mắt. Mục tiêu của chúng tôi là cắt bỏ nội dung sau dòng thứ ba. Chúng ta có thể thiết lập một max-height trên đoạn văn và ẩn phần tràn cho điều đó:
.card p {
max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
overflow: hidden; /* Cut off the content */
}Whoa whoa, có chuyện gì vậy calc() đồ đạc? Lưu ý rằng tôi đã thiết lập một --base biến trước có thể được sử dụng như một cấp số nhân chung. Tôi đang sử dụng nó để tính toán font-size, line-height, padding cho thẻ, và bây giờ là max-height của đoạn văn. Tôi thấy dễ dàng hơn khi làm việc với các giá trị không đổi, đặc biệt là khi kích thước tôi cần thực sự dựa trên tỷ lệ như thế này. Tôi nhận thấy MDN sử dụng một --base-line-height biến, có thể cho cùng một mục đích.
Làm cho dòng văn bản thứ ba mờ đi? Đó là một cổ điển linear-gradient() trên pargraph của :after phần tử giả, được ghim vào góc dưới bên phải của thẻ. Vì vậy, chúng ta có thể thiết lập:
.card p:after {
content: ""; /* Needed to render the pseudo */
background-image: linear-gradient(to right, transparent, var(--background) 80%);
position: absolute;
inset-inline-end: 0; /* Logical property equivalent to `right: 0` */
}Lưu ý rằng tôi đang gọi một --background biến được đặt thành cùng một giá trị màu nền được sử dụng trên .card chính nó. Bằng cách đó, văn bản dường như mờ dần vào nền. Và tôi thấy rằng tôi cần phải điều chỉnh điểm dừng màu thứ hai trong gradient vì văn bản không bị ẩn hoàn toàn khi gradient hòa trộn đến 100%. tôi đã tìm thấy 80% trở thành một điểm ngọt ngào cho đôi mắt của tôi.
Và vâng, :after cần một height và width. Các height đó là đâu --base các biến trở lại hoạt động bởi vì chúng tôi muốn điều đó được mở rộng thành line-height để che văn bản với chiều cao của :after.
.card p:after {
/* same as before */
height: calc(1rem * var(--base) + 1px);
width: 100%; /* relative to the .card container */
}Thêm một pixel chiều cao bổ sung dường như là một mẹo nhỏ, nhưng MDN đã có thể thực hiện mà không cần đến nó khi tôi xem trộm DevTools. Sau đó, một lần nữa, tôi không sử dụng top (Hoặc inset-block-start) để bù lại gradient theo hướng đó. 🤷♂️
Bây giờ p:after được định vị tuyệt đối, chúng ta cần khai báo rõ ràng vị trí tương đối trên đoạn văn để giữ :after trong dòng chảy của nó. Nếu không thì, :after sẽ hoàn toàn bị kéo khỏi luồng tài liệu và cuộn lại bên ngoài thẻ. Đây trở thành CSS đầy đủ cho .card đoạn văn:
.card p {
max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
overflow: hidden; /* Cut off the content */
position: relative; /* needed for :after */
}Chúng tôi đã hoàn thành, phải không? Không! Gradient dang dường như không ở đúng vị trí.
Tôi thừa nhận rằng tôi đã phát điên vì cái này và kích hoạt DevTools trên MDN để xem tôi đã bỏ sót cái quái gì. Ồ vâng, :after cần được hiển thị dưới dạng một phần tử khối. Nó rõ ràng như ban ngày khi thêm một đường viền màu đỏ vào nó.🤦♂️
.card p:after {
content: "";
background: linear-gradient(to right, transparent, var(--background) 80%);
display: block;
height: calc(1rem * var(--base) + 1px);
inset-block-end: 0;
position: absolute;
width: 100%;
}Tất cả cùng nhau ngay bây giờ!
Và, vâng, nhìn giống như VoiceOver tôn trọng toàn bộ văn bản. Tôi chưa thử nghiệm bất kỳ trình đọc màn hình nào khác.
Tôi cũng nhận thấy rằng việc triển khai MDN loại bỏ pointer-events từ p:after. Có lẽ là một chiến thuật phòng thủ tốt để ngăn chặn các hành vi kỳ quặc khi chọn văn bản. Tôi đã thêm nó vào và chọn văn bản cảm thấy mượt mà hơn một chút, ít nhất là trong Safari, Firefox và Chrome.
