CSS: truncate

.--truncate — การตัดทอนด้วยจุดไข่ปลาโดยจำกัดบรรทัดด้วย --lines — ใช้งานได้โดยตรงหรือเชนกับคอมโพเนนต์ใดก็ได้ (.instui-button.--truncate).

คลาสฐานใช้ display: -webkit-box และอ่าน custom property --lines เพื่อจำกัดข้อความเป็นจำนวนบรรทัดคงที่ก่อนจะตัดด้วยจุดไข่ปลา.

Source: index.ts

TIP

ข้อกำหนด JS — คอมโพเนนต์นี้ไม่มาพร้อม CSS ของตัวเอง — โครงสร้าง markup และพฤติกรรมทั้งหมดมาจาก @pantoken/interactions. ตัวดัดแปลง --max-lines-auto ถูกควบคุมโดยพฤติกรรมนั้น ดู ตารางตัวดัดแปลงด้านล่าง.

การใช้งาน

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

ตัวอย่าง

<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>

ตัวปรับแต่ง

ตัวปรับแต่ง	คำอธิบาย
.--lines-1	นามแฝงของ --max-lines-1.
.--lines-2	นามแฝงของ --max-lines-2.
.--lines-3	นามแฝงของ --max-lines-3.
.--lines-4	นามแฝงของ --max-lines-4.
.--lines-5	นามแฝงของ --max-lines-5.
.--max-lines-1	จำกัดเป็นบรรทัดเดียว (ค่าเริ่มต้น).
.--max-lines-2	จำกัดเป็นสองบรรทัด.
.--max-lines-3	จำกัดเป็นสามบรรทัด.
.--max-lines-4	จำกัดเป็นสี่บรรทัด.
.--max-lines-5	จำกัดเป็นห้าบรรทัด.
.--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	เปิดใช้งานการตัดทอนและการจำกัดบรรทัดบนองค์ประกอบเป้าหมาย.
.--truncate-character	(ค่าเริ่มต้น) ตัดทอนตามระดับอักขระ.
.--truncate-word	ตัดทอนตามระดับคำ.

พร็อพเพอร์ตีที่กำหนดเอง

คุณสมบัติ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

โทเค็นที่ใช้

Token	ชนิด	ค่า
--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%

รองรับเบราว์เซอร์

• การจำกัดบรรทัดพึ่งพา -webkit-line-clamp พร้อม display: -webkit-box และจับคู่กับ line-clamp มาตรฐาน.

ที่เกี่ยวข้อง

• text — แบบอักษรของเนื้อหาที่ถูกตัดทอนนี้.