CSS: truncate

.--truncate — Rút gọn bằng dấu chấm lửng với giới hạn dòng được điều khiển bởi --lines — có thể dùng độc lập hoặc nối chuỗi vào bất kỳ component nào (.instui-button.--truncate).

Lớp cơ sở sử dụng display: -webkit-box và đọc thuộc tính tùy chỉnh --lines để giới hạn văn bản ở một số dòng cố định trước khi kết thúc bằng dấu chấm lửng.

Source: index.ts

TIP

Yêu cầu JS — Component này không phát hành CSS riêng — cấu trúc và hành vi của nó hoàn toàn đến từ @pantoken/interactions. Bộ sửa đổi --max-lines-auto của nó được điều khiển bởi hành vi đó. Xem bảng modifier phía dưới.

Sử dụng

@import "@pantoken/components/utilities.css";

Các ví dụ

<div class="--truncate">This text is clamped to one line by default and ends in an ellipsis.</div>
<div class="--truncate" style="--lines: 3">This text is clamped to three lines and ends in an ellipsis.</div>
<button class="instui-button --truncate">…</button>

Bộ sửa

Bộ sửa	Mô tả
.--lines-1	Bí danh của --max-lines-1.
.--lines-2	Bí danh của --max-lines-2.
.--lines-3	Bí danh của --max-lines-3.
.--lines-4	Bí danh của --max-lines-4.
.--lines-5	Bí danh của --max-lines-5.
.--max-lines-1	Giới hạn về một dòng (mặc định).
.--max-lines-2	Giới hạn về hai dòng.
.--max-lines-3	Giới hạn về ba dòng.
.--max-lines-4	Giới hạn về bốn dòng.
.--max-lines-5	Giới hạn về năm dòng.
.--max-lines-auto	Interaction — — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
.--truncate	Kích hoạt việc rút gọn và giới hạn dòng trên phần tử mục tiêu.
.--truncate-character	(mặc định) Rút gọn ở cấp ký tự.
.--truncate-word	Rút gọn ở cấp từ.

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-truncate-text-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-line-height-paragraph-base	<percentage>	150%

Hỗ trợ trình duyệt

• Việc giới hạn dòng dựa trên -webkit-line-clamp với display: -webkit-box, kết hợp với line-clamp chuẩn.

Liên quan

• text — Kiểu chữ thân bản mà cái này rút gọn.