text-box-trim CSS

Lấy lại khoảng trống phía trên và phía dưới nội dung văn bản; đạt được sự cân bằng quang học.

Adam Argyle

Ngày phát hành: 14 tháng 1 năm 2025

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Chữ viết tay:

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

Chữ viết tắt:

text-box: trim-both cap alphabetic;

Thuộc tính này cho phép bạn kiểm soát khoảng trống phía trên và phía 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ông gian định hướng khối khác nhau, góp phần vào kích thước của phần tử. Mức đóng góp không gian hỗn loạn này không dễ đo lường và không thể kiểm soát được cho đến thời điểm hiện tại.

Phông chữ đã biết, giờ CSS cũng biết!

https://codepen.io/web-dot-dev/pen/xbKjRxL

Khoảng trắng phía trên và phía dưới phông chữ là do cách web bố trí văn bản, được gọi là "half-leading" (một nửa khoảng cách dòng). Matthias Ott đã đề cập chuyên sâu về vấn đề này trong bài đăng có tên The Thing With Leading In CSS (Điều cần biết về dấu cách đầu dòng trong CSS). Về cơ bản, khi sắp chữ bằng tay, người ta dùng các mảnh chì kim loại để phân tách các dòng văn bản. Trang web, lấy cảm hứng từ dòng tiêu đề, chia dòng tiêu đề đó làm đôi 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.

Dòng tiêu đề xuất hiện cùng với một thanh màu hồng đậm ở phía trên và phía dưới văn bản để hiển thị khoảng cách dòng một nửa.
Nguồn

Nhật ký này có ý nghĩa vì text-box cung cấp tên cho mỗi nửa: trên và dưới. Ngoài ra, bạn có thể cắt bớt phần thừa.

text-box cũng có nghệ thuật trước đó, bạn có thể nhớ bài đăng thú vị của Ethan Wang có tên Leading-Trim: The Future Of Digital Typesetting (Đầu dòng-Cắt bớt: Tương lai của hoạt động soạn thảo kỹ thuật số), trong đó leading-trim (tên trước đây là text-box) được giới thiệu lần đầu tiên.

Một dòng tiêu đề xuất hiện với khoảng trống thừa ở phía trên và phía dưới có vẻ như bị cắt bằng kéo và bị xoá.

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

Nguồn

Bất kể bạn đã đến đây bằng cách nào, chế độ kiểm soát kiểu chữ nghe có vẻ nhỏ bé này có thể tạo ra sự khác biệt lớn.

Tổng quan về tính năng và cú pháp

Theo tôi, đây là hai dòng lệnh phổ biến nhất mà bạn 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 nhiều lần. Tuy nhiên, ví dụ trước cũng cho thấy ex alphabetic vì nó hữu ích cho việc cân bằng quang học theo cách riêng.

Sân chơi Explorer

Bản minh hoạ sau đây cho phép bạn khám phá cú pháp và xem kết quả bằ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 làm theo các hình ảnh và nhãn được mã hoá bằng màu sắc.

Ảnh chụp màn hình minh hoạ trình khám phá cú pháp. Hiển thị phông chữ và trình đơn thả xuống để chọn một phông chữ khác. Bản xem trước cú pháp có text-box: trim-both cap alphabetic syntax được làm nổi bật và hiển thị. Cuối cùng, có thêm 3 trình đơn thả xuống để chọn giá trị cắt bớt.

Những điều nê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ể, bạn sẽ thấy các giá trị cắt được dùng để tạo 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.
https://codepen.io/web-dot-dev/pen/RNbyooE

Tôi có thể xây dựng gì bằng công cụ này hoặc công cụ này giải quyết 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 nhờ khả năng cắt bớt này. Bạn thậm chí có thể tiến gần hơn đến khoảng cách lề phù hợp, trong đó có thể sử dụng một nội dung như gap giữa các nội dung.

Nội dung so sánh giữa 2 nhóm nội dung. Nhóm đầu tiên có dấu cách ở đầu dòng, nhóm thứ hai có dấu cách bị cắt bớt ở đầu dòng. Kết quả là nhóm thứ hai sẽ chặt chẽ hơn.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Dễ căn giữa hơn

Đối với các thành phần nội dung nội tại, nội tuyến và nhỏ hơn, 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 cạnh. Tuy nhiên, kết quả có thể gây nhầm lẫn cho người dùng vì thường có thêm không gian ở trên cùng và dưới cùng.

Để giải quyết vấn đề này, các nhà phát triển thường giảm khoảng đệm ở trên cùng và dưới cùng (khối) để bù lại hiệu ứng của khoảng cách dòng một nửa.

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

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

text-box cho phép chúng ta cắt bớt một nửa khoảng trắng ở đầu 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;
}
Hai ví dụ được hiển thị. Mẫu đầu tiên hiển thị một phần tử có khoảng đệm: 10px và khoảng cách dòng một nửa. Hình thứ hai cho thấy cùng một phần tử với text-box: trim-both cap alphabetic. Kết quả là nút thứ hai được căn giữa theo phương diện quang học.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Sau đây là một vài phần tử <button> cho thấy cách cắt bớt không gian bằng text-box giúp padding: 10px trông cân bằng ở mọi cạnh trong một phần tử 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 dòng giữa khác nhau.

Ba nhóm nút sẽ xuất hiện. Nhóm đầu tiên hiển thị phông chữ sans serif thông thường. Nhóm thứ hai hiển thị một phông chữ đẹp hoặc vui nhộn. Nhóm thứ ba cho thấy hiệu ứng tương tự nhưng với phông chữ viết tay. Mục đích là để cho thấy mỗi phông chữ có khoảng cách dòng giữa khác nhau, nhưng các giá trị cắt đều giống nhau và có thể chuẩn hoá khoảng cách dòng giữa.
https://codepen.io/web-dot-dev/pen/mybLOMg

Sau đâ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 hai bên bằng nhau là giải pháp tốt nhất, nhưng cho đến text-box, chúng ta đã phải giải quyết vấn đề này.

Các thẻ được hiển thị cạnh nhau. Nhóm đầu tiên có dấu cách ở đầu dòng, nhóm thứ hai có dấu cách bị cắt bớt ở đầu dòng. Kết quả là nhóm thứ hai được sắp xếp chặt chẽ hơn và được căn giữa theo quang học.
https://codepen.io/web-dot-dev/pen/mybLOMg

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

Khoảng trắng thừa, không kiểm soát được, nửa khoảng trắng 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 trường hợp khoảng cách dòng một nửa có thể gây khó khăn cho việc căn chỉnh và cách cắt bớt các cạnh khối của hộp văn bản có thể tạo ra các 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 sẽ tăng lên chiều cao mà văn bản cần, nhưng nếu không có text-box, hình ảnh sẽ 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.

https://codepen.io/web-dot-dev/pen/yyBjVpg

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 điều chỉnh một cách hợp lý đối với thay đổi trong writing-mode. Hãy thử thay đổi văn bản, xem bố cục tiếp tục căn chỉnh như thế nào.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

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.