Bài này chúng ta sẽ tập chung tìm hiểu về các thuộc tính tác động đến khối văn bản:

1, Thuộc tính page-break-after page-break-before và page-break-inside.

-Chức năng của 3 thuộc tính này mình đã nói ở phía trên rồi và phần này mình chỉ nêu ra các giá trị kèm theo thuộc tính.

Cú Pháp:

selector{
    properties: value;
}

 Trong đó value có thể là một trong các giá trị sau:

• auto - phân chia văn bản ngay sau thành phần nếu cảm thấy cần thiết (đây là thuộc tính mặc định).
• always - phân chia văn bản ngay sau thành phần.
• avoid - không phân chia văn bản ngay sau thành phần.
• left - phân chia văn bản ngay sau bên trái thành phần.
• right - phân chia văn bản ngay sau bên phải thành phần.
• inherit - kế thừa thuộc tính từ thành phần cha.

VD:

p.af{
    page-break-after: left;
}

Xem Kết Quả

2, Thuộc tính white-space.

-Thuộc tính này có tác dụng xác định cách xử lý khoảng trắng trong văn bản.

Cú Pháp:

selector{
    white-space: value;
}

Trong đó value là một trong các giá trị sau đây:

• normal - hiển thị khoảng trắng như bình thường (dạng mặc định).
• nowrap - văn bản sẽ xuống dòng khi gặp thẻ <br /> còn không nó sẽ hiển thị trên một dòng.
• pre - khoảng trắng sẽ được trình duyệt xét hiển thị. Hoạt động giống thẻ <pre>.
• pre-line - văn bản sẽ tự động được bao lại nếu cần thiết.
• pre-wrap - khoảng trắng sẽ được trình duyệt xét hiển thị. và nó sẽ tự động bo lại khi cần thiết.
• inherit - kế thừa thuộc tính của thành phần cha.

VD:

p{
    width: 100px;
    background: orange;
    /*Không cho đoạn văn bản xuống dòng*/
    white-space: nowrap;
}

Xem Kết Quả

-Như các bạn đã thấy thì dòng văn bản không tự động xuống dòng mà tự động tràn full width.

3, Thuộc tính word-spacing.

- Với thuộc tính này chúng ta có thể xác định được khoảng cách giữa các từ với nhau trong một văn bản.

Cú Pháp:

selector{
    word-spacing: value;
}

Trong đó value có thể là một trong các giá trị sau đây:

• normal - giá trị tự động không tăng, không giảm khoảng cách của các từ (đây là mặc định).
• đơn vị - điền vào giá trị khoảng cách của các chữ.
• inherit - kế thừa thuộc tính từ thành phần cha.

VD:

p{
    /*Xác định khoảng cách giữa các từ với nhau là 10px*/
    word-spacing: 10px;
}

Xem Kết Quả

4, Lời kết.

-Các thuộc tính này thông thường thì sẽ rất ít khi sử dụng, nhưng nếu như bạn làm các văn bản dùng để in thì nó thực sự sẽ rất hữu dụng.