Ví dụ về thuộc tính text-justify

Posted on by mtoplistChuyên mục:Top List

Thuộc tính text-justify với giá trị auto

Thuộc tính text-justify với giá trị auto: Trình duyệt tự động sắp xếp text cho thành phần.

HTML viết:

<html>
<head></head>
<body>
<p>Đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify.</p>
</body>
</html>

CSS viết:

p {
    border: 1px solid #cc0000;
    height: 200px;
    overflow: auto;
    resize: horizontal;
    text-align: justify;
    width: 600px;
}

Hiển thị trình duyệt khi chưa có text-justify:

Đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify.

Thêm thuộc tính text-justify, CSS viết:

p {
    border: 1px solid #cc0000;
    height: 200px;
    overflow: auto;
    resize: horizontal;
    text-align: justify;
    text-justify: distribute;
    width: 600px;
}

Hiển thị trình duyệt khi có text-justify:

Đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify.

Thuộc tính text-justify với giá trị distribute

Thuộc tính text-justify với giá trị distribute: Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ như tiếng Nhật.

Thêm thuộc tính text-justify, CSS viết:

p {
    border: 1px solid #cc0000;
    height: 200px;
    overflow: auto;
    resize: horizontal;
    text-align: justify;
    text-justify: distribute;
    width: 600px;
}

Hiển thị trình duyệt khi có text-justify:

Đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify.

Thuộc tính text-justify với giá trị inter-cluster

Thuộc tính text-justify với giá trị inter-cluster: Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ Đông Nam Á, như Thái.

Thêm thuộc tính text-justify, CSS viết:

p {
    border: 1px solid #cc0000;
    height: 200px;
    overflow: auto;
    resize: horizontal;
    text-align: justify;
    text-justify: inter-cluster;
    width: 600px;
}

Hiển thị trình duyệt khi có text-justify:

Đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify.

Thuộc tính text-justify với giá trị inter-ideograph

Thuộc tính text-justify với giá trị inter-ideograph: Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ CJK.

Thêm thuộc tính text-justify, CSS viết:

p {
    border: 1px solid #cc0000;
    height: 200px;
    overflow: auto;
    resize: horizontal;
    text-align: justify;
    text-justify: inter-ideograph;
    width: 600px;
}

Hiển thị trình duyệt khi có text-justify:

Đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify.

Thuộc tính text-justify với giá trị inter-word

Thuộc tính text-justify với giá trị inter-word: Tăng hoặc giảm khoảng cách giữa các từ, được sử dụng cho ngôn ngữ có từ cách biệt như tiếng Anh hoặc tiếng Hàn.

Thêm thuộc tính text-justify, CSS viết:

p {
    border: 1px solid #cc0000;
    height: 200px;
    overflow: auto;
    resize: horizontal;
    text-align: justify;
    text-justify: inter-word;
    width: 600px;
}

Hiển thị trình duyệt khi có text-justify:

Đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify.

Thuộc tính text-justify với giá trị kashida

Thuộc tính text-justify với giá trị kashida: Tăng hoặc giảm khoảng cách giữa các từ, thường được sử dụng trong các ký tự thư pháp, giá trị này phù hợp với tiêu đề trong CSS3.

Thêm thuộc tính text-justify, CSS viết:

p {
    border: 1px solid #cc0000;
    height: 200px;
    overflow: auto;
    resize: horizontal;
    text-align: justify;
    text-justify: kashida;
    width: 600px;
}

Hiển thị trình duyệt khi có text-justify:

Đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify đây là nội dung sử dụng text justify.

mtoplist