Các dòng văn bản có chiều rộng bằng nhau

Tính năng web: text-fit text-wrap: balance text-box

Kiểu khoá dạng áp phích, trong đó mỗi dòng được điều chỉnh theo tỷ lệ để trải dài toàn bộ chiều rộng của vùng chứa, có thể tạo ra các tiêu đề nổi bật về mặt hình ảnh. Khi sử dụng text-fit, trình duyệt sẽ điều chỉnh tỷ lệ của từng dòng trong bố cục, nhờ đó, bố cục vẫn chính xác khi thay đổi kích thước, thay đổi nội dung và tải phông chữ.

Đối với một dòng duy nhất lấp đầy vùng chứa (ví dụ: tiêu đề hoặc trích dẫn), hãy áp dụng trực tiếp text-fit cho phần tử đó; hướng dẫn này đề cập đến các bố cục nhiều dòng.

Cách triển khai cơ bản

Đối với dòng bắt buộc:

  • Gói từng dòng trong <span> bằng display: block.
  • Áp dụng white-space: nowrap cho mỗi dòng bắt buộc <span>.

Nguyên tắc triển khai:

  • Sử dụng text-fit: grow per-line-all <percentage> trên chính tiêu đề.
  • Sử dụng per-line-all, không sử dụng per-line. per-line bỏ qua dòng cuối cùng và mọi dòng kết thúc bằng dấu ngắt dòng bắt buộc, vì vậy, với một khối trên mỗi dòng, thuộc tính này không điều chỉnh tỷ lệ gì cả.
  • Không thể kết hợp grow với shrink. Đặt font-size cơ sở thành giá trị tối đa hoặc tối thiểu tuỳ thuộc vào giá trị dự phòng phù hợp hơn hoặc dễ tính toán hơn, đồng thời đặt text-fit thành shrink hoặc grow tương ứng. Nếu bạn không có lý do để sử dụng shrink, hãy ưu tiên grow + đặt font-size ở mức tối thiểu, vì cách này an toàn hơn trong hầu hết các trường hợp.
  • Luôn giới hạn mức tăng hoặc giảm bằng tỷ lệ phần trăm (ví dụ: 300%) làm rào chắn.
  • Vùng chứa cần có kích thước cùng dòng xác định. text-fit không bao giờ thay đổi kích thước nội tại, vì vậy, thuộc tính này không có tác dụng đối với chiều rộng fit-content/max-content hoặc các mục flex/grid có kích thước nội dung.
  • Cắt bớt khoảng cách dòng phía trên dòng đầu tiên và phía dưới dòng cuối cùng: xem phần Căn chỉnh văn bản chính xác.
  • Giữ line-height nhỏ, 1 hoặc thấp hơn, nếu không, khoảng cách giữa các dòng có cỡ chữ khác nhau sẽ trở nên khó điều chỉnh.
  • QUAN TRỌNG: Xin lưu ý rằng font-size được tính toán không thay đổi, vì vậy, khoảng cách em không điều chỉnh theo tỷ lệ.
  • Để tránh vô tình nhấn mạnh quá mức vào các dòng mồ côi, hãy áp dụng text-wrap: balance hoặc text-wrap: pretty nếu có các dòng trống.

Giãn cách

Nếu tất cả các dòng đều được buộc, thì việc này sẽ giúp bạn kiểm soát khoảng cách tốt hơn:

  • Áp dụng text-box: trim-both cap alphabetic cho mỗi khối dòng để hộp của khối đó ôm sát các ký tự của chính nó. Hàm này cắt bớt bằng cách sử dụng các chỉ số được điều chỉnh theo tỷ lệ. Hãy xem phần Căn chỉnh văn bản chính xác để biết thêm thông tin chi tiết.
  • Dùng Flexbox hoặc Grid + gap trên tiêu đề để giãn dòng, không dùng line-height. Sau đó, các khoảng trống sẽ đồng đều thay vì tăng theo cỡ chữ của mỗi dòng.

Nếu một số dòng trống, đừng sử dụng text-box: thuộc tính này chỉ cắt bớt dòng đầu tiên và dòng cuối cùng, vì vậy, các dòng bên ngoài sẽ ôm sát các ký tự trong khi các khoảng trống bên trong vẫn giữ nguyên khoảng cách dòng. Hãy để line-height điều chỉnh tất cả khoảng cách.

Thiết kế trực quan

  • Bố cục chữ trông đẹp nhất khi có sự khác biệt đáng kể về cỡ chữ giữa các dòng. Tránh tạo bố cục từ văn bản có các dòng hầu như giống nhau, vì điều này sẽ dẫn đến cỡ chữ không giống nhau cũng không đủ khác biệt, vi phạm nguyên tắc thiết kế về độ tương phản. Bạn có thể đảm bảo điều này bằng cách buộc các dòng phải ngắn: gói các từ cần nhấn mạnh trong một khối và để phần còn lại gói, tức là một bố cục hỗn hợp. Điều này đặc biệt quan trọng khi kết hợp với text-wrap: balance.
  • Nên kết hợp thuộc tính này với text-transform: uppercase khi dùng với chữ viết phương Tây, vì các nét trên và nét dưới có xu hướng tạo ra khoảng trống bị kẹt và/hoặc chồng chéo các dòng liền kề, khiến kết quả không được đẹp mắt.
  • Khi buộc phải dùng dòng ngắn, hãy chọn những từ có thể làm nổi bật thông điệp nếu được nhấn mạnh.
  • Hạn chế: Văn bản lớn hơn cũng sẽ tăng trọng lượng thị giác và nét chữ sẽ có vẻ đậm hơn. Hiện tại, không có cách nào để cân bằng điều này, chẳng hạn như bằng cách giảm font-weight cho văn bản lớn hơn, vì không có đơn vị nào để sử dụng trong phép tính, vì việc điều chỉnh tỷ lệ không ảnh hưởng đến các đơn vị liên quan đến phông chữ như em.

Chiến lược dự phòng

Cho text-box

text-box không cần phương án dự phòng riêng: hãy giữ nguyên line-height nhỏ trên các bố cục cố định. Đây là một thao tác không hoạt động trong text-box và giữ cho các khoảng trống hẹp ở những nơi không được hỗ trợ, với chi phí là các khoảng trống điều chỉnh theo cỡ chữ của mỗi dòng.

Cho text-wrap: balance

Cho text-fit

Các dòng bắt buộc có một phương án dự phòng ngắn và chính xác: đo lường từng dòng theo kích thước cơ sở và điều chỉnh tỷ lệ theo tỷ lệ của vùng chứa, với cùng một giới hạn.

@supports not (text-fit: grow) {
  .lockup > span {
    /* Shrink-wrap each line so its width is the text width */
    width: fit-content;
    /* --text-fit-scale is measured by the script; the cap mirrors the text-fit percentage */
    font-size: min(var(--text-fit-scale, 1) * 1em, 300%);
  }
}

if (!CSS.supports('text-fit', 'grow per-line-all')) {
  const fit = lockup => {
    const lines = [...lockup.querySelectorAll(':scope > span')];
    // Unscale first: on a refit, offsetWidth would otherwise include the previous scale
    for (const line of lines) line.style.removeProperty('--text-fit-scale');
    // MANDATORY: all reads, then all writes. Interleaving them (e.g. reading
    // lockup.clientWidth inside the write loop) forces one reflow per line.
    const scales = lines.map(line => lockup.clientWidth / line.offsetWidth);
    lines.forEach((line, i) => line.style.setProperty('--text-fit-scale', scales[i]));
  };
  // Refit on resize and font load
  for (const lockup of document.querySelectorAll('.lockup')) {
    new ResizeObserver(() => fit(lockup)).observe(lockup);
  }
}

Các dòng tự do không có phương án dự phòng chính xác (không xác định được dấu ngắt dòng cho đến khi bố cục): cải tiến tăng dần thành tiêu đề cân bằng với kích thước cơ sở linh hoạt như clamp(2rem, 1rem + 5cqi, 5rem). Trong một bố cục hỗn hợp, tập lệnh ở trên vẫn vừa với các dòng bắt buộc; một khối gói có kích thước rộng bằng vùng chứa, vì vậy, khối này giữ tỷ lệ 1 và chỉ có kích thước cơ sở linh hoạt.

Nếu việc điều chỉnh văn bản là rất quan trọng, hãy cân nhắc sử dụng thư viện JS (ví dụ: fitty), chỉ được tải có điều kiện nếu text-fit không được hỗ trợ.