Làm cách nào để kiểm soát khoảng cách từ trong văn bản hợp lý bằng CSS?


9

Tôi có 2 khối văn bản khá nhỏ (chỉ dưới một đoạn) và chúng thực sự trông hợp lý hơn nhưng vấn đề là text-align: justify;đôi khi thêm không gian thực sự lớn và làm cho văn bản hơi xấu (rõ ràng là hiệu ứng ngược lại).

Có thể điều chỉnh chính xác hơn khoảng cách từ với CSS để điều này không xảy ra?

Câu trả lời:


9

CSS-JUSTIFY

Đây IE chỉ cung cấp sở hữu một tinh trên giá trị “biện minh” được sử dụng trong text-alignbất động sản. Thật vậy, giá trị của justifyify phải được đặt cho thuộc tính đó text-justifyđể có bất kỳ ảnh hưởng nào.

text-justify cung cấp một mức độ kiểm soát biện minh tốt đối với nội dung kèm theo, cho phép nhiều mô hình biện minh tinh vi được sử dụng trong các hệ thống viết ngôn ngữ khác nhau.

Thí dụ

<p style="text-align: justify; text-justify: newspaper;">
    This is Newspaper justified content
</p>

Những giá trị khả thi

VALUE                   DESCRIPTION
----------------------  ---------------------------------------------------------------------
auto                    The browser will determine the appropriate justification algorithm
                        to use

distribute              Justification is handled similarly to the newspaper value,
                        but this version is optimized for East Asian content
                        (especially the Thai language.)
                        In this justification method, the last line is not justified.

distribute-all-lines    Behavior and intent for this value is the same as with the
                        distribute value, but the last line is also justified.

inter-cluster           Justifies content that does not have any inter-word spacing
                        (such as with many East Asian languages.)

inter-ideograph         Used for justifying blocks of ideographic content.
                        Justification is achieved by increasing or decreasing spacing
                        between ideographic characters and words as well.

inter-word              Justification is achieved by increasing the spacing between words.
                        It is the quickest method of justification and does not justify
                        the last line of a content block.

newspaper               Spacing between letters and words are increased or decreased
                        as necessary.

Tài liệu tham khảo IE cho biết, đây là hình thức biện minh tinh vi nhất cho bảng chữ cái Latinh.

Nguồn: http://www.css3.com/css-text-justify/

Hi vọng điêu nay co ich!


Điều này dường như được hỗ trợ bởi các trình duyệt khác bây giờ.
mndrix

3

Ngoài việc sử dụng text-justify, dường như chỉ được IE hỗ trợ, hãy xem xét thêm dấu gạch nối, với gợi ý gạch nối rõ ràng &shy;và / hoặc gạch nối tự động dựa trên trình duyệt, sử dụng hyphens: autovới tiền tố trình duyệt do hoặc sử dụng dấu gạch nối dựa trên JavaScript như Hyphenator.js. Phép nối thường làm giảm đáng kể nhu cầu thêm khoảng cách trong phần biện minh.


The text-justify property is supported in all of the major browsers., nguồn: w3schools.com/cssref/css3_prigin-justify.asp và Text-Align, w3schools.com/cssref/pr lòng lòng

3
@AbdiasSoftware, trang này không có thật - một bằng chứng khác về w3schools là tào lao, xem w3fools.com (Trang w3schools chứa các nút của Play Play, mà bạn có thể sử dụng để xem khá nhanh rằng thông tin của họ bị sai.)
Jukka K. Korpela

Họ là một chút lỗi thời đôi khi, nhưng tôi sẽ không gọi họ là không có thật :-) Đây là anyways một nguồn: reference.sitepoint.com/css/text-align

@AbdiasSoftware, nguồn khác là về một tài sản khác. Trang web Reference.sitepoint.com hoàn toàn không đề cập đến text-justify. Nhưng tôi xin lỗi vì ban đầu tôi đã viết về text-align-justifythay vì text-justify(đã sửa bây giờ). Các thiết lập text-align: justifytất nhiên được ngụ ý ở đây; Vấn đề là liệu loại biện minh có thể được kiểm soát.
Jukka K. Korpela

Hừm, cũng thú vị. Tôi sẽ làm một số nghiên cứu thêm. Cảm ơn. Bây giờ là 4 giờ sáng, phán đoán của tôi đã tắt :-)
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.