text-box-trim CSS

Adam Argyle

Ngày xuất bản: 14 tháng 1 năm 2025

Từ Chrome 133, text-box cho phép nhà phát triển và nhà thiết kế điều chỉnh khoảng cách phía trên và bên dưới văn bản.

Longhand:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Shorthand:

text-box: trim-both cap alphabetic;

Thuộc tính này cho phép bạn kiểm soát khoảng cách phía trên và bên dưới văn bản, ví dụ: <h1>, <button> và <p>. Mỗi phông chữ tạo ra một lượng khác nhau của khoảng cách theo hướng khối này, góp phần vào kích thước của phần tử. Đóng góp khoảng cách hỗn loạn này không dễ đo lường và cho đến nay, không thể kiểm soát được.

Phông chữ biết, CSS cũng biết.

Khoảng cách phía trên và bên dưới phông chữ tồn tại do cách web bố trí văn bản, được gọi là "nửa khoảng cách dòng". Điều này được đề cập một cách chuyên nghiệp trong bài đăng của Matthias Ott có tên là The Thing With Leading In CSS. Về cơ bản, khi việc sắp chữ được thực hiện bằng tay, các mảnh chì kim loại được dùng để phân tách các dòng văn bản. Web, lấy cảm hứng từ khoảng cách dòng, chia khoảng cách dòng thành hai phần và phân phối một phần phía trên và một phần phía dưới nội dung.

Lịch sử này có ý nghĩa vì text-box cung cấp cho chúng ta tên cho mỗi nửa: trên và dưới. Ngoài ra, bạn có thể cắt bỏ nó.

Ngoài ra còn có thông tin trước đây cho text-box. Bạn có thể nhớ lại bài đăng thú vị của Ethan Wang có tên là Leading-Trim: The Future Of Digital Typesetting, trong đó leading-trim (tên mà text-box từng có) lần đầu tiên được giới thiệu.

Điểm bắt đầu của bạn để cắt văn bản có thể là từ Figma và các chế độ điều khiển "cắt dọc" cho nhà thiết kế. Bài đăng này trên X minh hoạ vị trí của tuỳ chọn cắt dọc này và cách tuỳ chọn này hữu ích cho các nút.

Bất kể bạn đến đây bằng cách nào, chế độ điều khiển kiểu chữ nhỏ này có thể tạo ra sự khác biệt lớn.

Tính năng và cú pháp

Theo tôi, đây là 2 dòng mã phổ biến nhất mà bạn sẽ cần khi làm việc với text-box:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Việc cắt cả hai thành cap alphabetic sẽ là cách sử dụng phổ biến nhất của tính năng này. Các bản minh hoạ sau đây sử dụng tính năng này nhiều lần. Tuy nhiên, ví dụ trước cũng cho thấy ex alphabetic vì nó hữu ích cho sự cân bằng quang học theo những cách riêng biệt.

Sân chơi khám phá

Khám phá cú pháp trong sân chơi của chúng tôi, và xem kết quả bằng cách sử dụng trình đơn thả xuống. Bạn có thể thay đổi phông chữ, thay đổi giá trị cắt trên và dưới, đồng thời theo dõi hình ảnh và nhãn được mã hoá bằng màu.

Những điều cần thử:

1. Kiểm tra trực quan cách text-box-trim hoạt động trên các biến thể văn bản một dòng và nhiều dòng.
2. Di chuột qua một biến thể, xem các giá trị cắt được dùng để đạt được hiệu ứng đó.
3. Thay đổi phông chữ.
4. Chỉ cắt một bên của hộp văn bản.
5. Xem lại cú pháp khi bạn chơi.

Tôi có thể xây dựng những gì và tính năng này giải quyết những vấn đề gì?

Có một số giải pháp căn giữa và căn chỉnh đơn giản hơn nhiều xuất hiện từ khả năng cắt này. Bạn thậm chí có thể tiến gần hơn đến khoảng cách dòng thích hợp, trong đó bạn có thể dùng gap giữa các nội dung.

Căn giữa dễ dàng hơn

Đối với các thành phần nhỏ hơn, cùng dòng hơn và có nội dung vốn có, padding: 10px là kiểu hợp lý để chỉ định cho một phần tử để có khoảng cách bằng nhau ở tất cả các bên. Tuy nhiên, kết quả có thể khiến mọi người nhầm lẫn vì thường có thêm khoảng trống ở trên cùng và dưới cùng.

Để khắc phục vấn đề này, lập trình viên thường đặt ít khoảng đệm hơn ở trên cùng và dưới cùng (khối) để bù trừ cho các hiệu ứng của nửa khoảng cách dòng.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

Tại thời điểm này, chúng ta phải thử các tổ hợp giá trị cho đến khi các thành phần được căn giữa một cách quang học. Điều này có thể trông đẹp trên một màn hình và hệ điều hành, nhưng không đẹp trên màn hình và hệ điều hành khác.

text-box cho phép chúng ta cắt khoảng cách nửa khoảng cách dòng khỏi văn bản, giúp các giá trị khoảng đệm bằng nhau như 10px trở nên hữu ích:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

Dưới đây là một vài phần tử <button> cho thấy cách cắt khoảng cách bằng text-box giúp padding: 10px trông bằng nhau ở tất cả các bên trong một thành phần tương tác thực tế. Hãy lưu ý cách phông chữ thay thế có thể tạo ra một số khoảng cách nửa khoảng cách dòng khác biệt đáng kể.

Dưới đây là các phần tử <span>, thường được dùng để hiển thị danh mục hoặc huy hiệu. Một trường hợp khác mà khoảng đệm bằng nhau ở các bên sẽ là giải pháp tốt nhất, nhưng cho đến khi có text-box, chúng ta phải giải quyết vấn đề này.

Căn chỉnh dễ dàng hơn

Khoảng cách nửa khoảng cách dòng bổ sung, không thể kiểm soát được ở phía trên (over) và phía dưới (under) hộp văn bản cũng khiến việc căn chỉnh trở nên khó khăn. Các ví dụ sau đây cho thấy khi nửa khoảng cách dòng có thể khiến việc căn chỉnh trở nên khó khăn và cách cắt các bên khối của hộp văn bản có thể tạo ra sự căn chỉnh tốt hơn.

Ở đây, hình ảnh được đặt bên cạnh văn bản. Hình ảnh tăng lên chiều cao mà văn bản cần. Nếu không có text-box, hình ảnh luôn cao hơn một chút. Với text-box, hình ảnh có thể căn chỉnh hoàn hảo với nội dung văn bản.

Hãy lưu ý rằng khoảng trắng nằm phía trên dòng văn bản được định dạng đầu tiên và phía dưới dòng văn bản được định dạng cuối cùng trong các trường hợp có tính năng xuống dòng.

Trong ví dụ sau, hãy lưu ý cách tính năng này thích ứng một cách hợp lý với sự thay đổi trong writing-mode. Hãy thử thay đổi văn bản, xem cách bố cục tiếp tục được căn chỉnh.

Tiếp tục nghiên cứu

Bạn muốn tìm hiểu thêm? Danh sách đường liên kết sau đây cung cấp nhiều thông tin bổ sung và trường hợp sử dụng.

• Bộ sưu tập Codepen của tất cả các bản minh hoạ.
• Nghiên cứu và bản minh hoạ tuyệt vời của Jan Nicklas.
• Hai thuộc tính CSS để cắt khoảng trắng trong hộp văn bản trên CSS Tricks.
• Bố cục cùng dòng CSS trên các cạnh văn bản.
• Không nhầm lẫn với hoặc size-adjust hoặc ascent-override
• Đường cơ sở CSS: Tốt, xấu và tệ.
• Áp dụng cho nhiều phần tử HTML: CodePen.
• Bài đăng trên blog của Safari.
• Tại sao tôi hào hứng với tính năng cắt hộp văn bản với tư cách là nhà thiết kế.