Text-justify - Thủ thuật CSS

Các text-justifybất động sản trong CSS là người bạn đồng hành với text-aligntài sản đó được sử dụng để thiết lập các phương pháp biện minh của văn bản khi text-alignđược thiết lập để các justifygiá trị.

p ( text-align: justify; text-justify: inter-word; )

Giá trị

inter-word: Chỉ định văn bản được căn chỉnh bằng cách điều chỉnh khoảng cách giữa các từ, tạo hiệu quả khoảng cách từ bổ sung. Đây thực sự là một biến thể của thuộc word-spacingtính.
inter-character: Chỉ định rằng văn bản được điều chỉnh bằng cách điều chỉnh khoảng cách giữa các ký tự, tạo hiệu quả khoảng cách ký tự bổ sung. Đây thực sự là một biến thể của thuộc letter-spacingtính.
auto: Cho phép trình duyệt xác định xem lý do có được xử lý tốt hơn inter-wordhay không inter-character. Điều này có thể hữu ích trong các tình huống đa ngôn ngữ mà ngôn ngữ nội dung không được biết cho đến khi được hiển thị, cho phép tác nhân người dùng trình duyệt lựa chọn phù hợp dựa trên phương pháp nào phù hợp hơn với ngữ cảnh ngôn ngữ.
none: Vô hiệu hóa các phương pháp biện minh, loại bỏ một cách hiệu quả mọi cơ hội biện minh hoặc ghi đè lên nơi một phương pháp biện minh có thể xảy ra trong dòng.

Chính xác thì sự biện minh là gì?

Văn bản căn đều là một cách nói hay để nói cách văn bản lấp đầy hộp chứa nó. Trên thực tế, bạn có thể đã quen với văn bản biện minh và thậm chí không biết về nó. Nếu bạn đã từng sử dụng phần mềm chỉnh sửa văn bản như Word và Google Docs, thì bạn có thể quen thuộc với các biểu tượng sau:

Các tùy chọn căn chỉnh và căn lề văn bản trong thanh công cụ của Google Tài liệu

Ba đầu tiên đó đặt căn chỉnh văn bản, giống như thuộc tính CSS text-align, nơi văn bản có thể được căn chỉnh sang trái, phải hoặc căn giữa hoàn toàn.

Biểu tượng thứ tư đó là tùy chọn justify và nó cho biết nội dung phải lấp đầy toàn bộ chiều rộng của tài liệu để mỗi dòng nằm ngay cạnh lề, bất kể nó có ảnh hưởng đến khoảng cách giữa các từ hay không.

Biện minh cho nội dung trong Google Tài liệu thêm khoảng cách giữa các từ để chiếm toàn bộ chiều rộng tài liệu ở mỗi dòng

Các text-justifybất động sản cho phép chúng ta làm như vậy, nhưng với sự linh hoạt thêm để xác định xem phương pháp khoảng cách sử dụng để biện minh cho nội dung được quản lý giữa các từ hoặc ký tự.

Hỗ trợ trình duyệt

Các text-justifybất động sản được đưa vào CSS Tiêu đề Mô-đun Level 3 đặc điểm kỹ thuật, mà hiện nay đang trong tình trạng Dự thảo biên tập viên tại thời điểm viết bài này.

Tài sản này hiện được liệt kê là "có nguy cơ" bị loại bỏ trong giai đoạn Đề xuất Ứng viên. Do đó, không nên sử dụng thuộc tính này trong sản xuất vì nó khó có thể được chấp nhận làm tiêu chuẩn trên tất cả các trình duyệt trong tương lai gần.

Hỗ trợ hiện tại được giới hạn cho Firefox 55+. Internet Explorer 11 và Edge 14+ cũng hỗ trợ thuộc tính, nhưng chỉ inter-wordgiá trị cũng như các giá trị không chính thức không có trong đặc tả W3C.

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.