Tidadigi Logo

CSS page-break-before Property

Thuộc tính `page-break-before` trong CSS dùng để thêm ngắt trang trước phần tử được chỉ định. Thuộc tính này giúp xác định cách tài liệu hoạt động khi in. Tương tự, `page-break-after` và `page-break-inside` cũng rất quan trọng. Chúng giúp xác định tài liệu kết quả sẽ như thế nào khi in.

Lưu ý: Thuộc tính `page-break-before` không dùng được cho phần tử định vị tuyệt đối hoặc rỗng. Hãy dùng thuộc tính `break-before` thay vì `page-break-before`.

 Cú pháp:

page-break-before: auto|always|avoid|left|right|initial|inherit;

Giá trị:

  • auto: Tham chiếu đến ngắt trang tự động.
page-break-before: auto;
HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: auto;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:auto;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>
  • always: Ngắt trang luôn được chèn sau hộp phần tử được chỉ định.
page-break-before:always;
HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: always;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:always;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions).
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>
  • avoid: Tránh ngắt trang nếu có thể.
page-break-before:avoid;
HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: avoid;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:avoid;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>
  • left: Ngắt trang được chèn sao cho trang tiếp theo là trang bên trái.
page-break-before:left;
HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: left;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:left;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>
  • right: Ngắt trang được chèn sao cho trang tiếp theo là trang bên phải.
page-break-before:right;
HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before: right;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:right;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>
  • initial: Thuộc tính được đặt về mặc định.
page-break-before:initial
HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        page-break-before:initial;
    </title> 
</head> 
<body> 
    <p style= "page-break-before:initial;"> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common.  
    </p> 
    <p> 
        The oldest classical Greek and Latin 
        writing had little or no space between
        words and could be written in boustrophedon
        (alternating directions). Over time, text
        direction (left to right) became standardized,
        and word dividers and terminal punctuation 
        became common. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>
  • inherit: Thuộc tính được kế thừa từ phần tử cha.
page-break-before:inherit;
HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <title>css_page_break_before</title> 
    <style> 
        p { 
            page-break-before:always; 
        } 
        
        div{ 
            page-break-before:default; 
        } 
        
        #c1{ 
            page-break-before:left; 
        } 
        
        #c2{ 
            page-break-before:inherit; 
        } 
    </style> 
</head> 
<body> 
    <p> 
        The oldest classical Greek and Latin writing had little or 
        no space between words and could be written in boustrophedon 
        (alternating directions). Over time, text direction (left to 
        right) became standardized, and word dividers and terminal 
        punctuation became common. The first way to divide sentences 
        into groups was the original paragraphos, similar to an 
        underscore at the beginning of the new group.
    </p> 
    <div> 
        <p id="c2"> 
        Indented paragraphs demonstrated in the US Constitution 
        In ancient manuscripts, another means to divide sentences 
        into paragraphs was a line break (newline) followed by an 
        initial at the beginning of the next paragraph. An initial 
        is an oversized capital letter, sometimes outdented beyond 
        the margin of the text. This style can be seen, for example, 
        in the original Old English manuscript of Beowulf. 
        </p> 
    </div> 
    <p id="c1"> 
        A second common modern English style is to use no indenting, 
        but add vertical white space to create "block paragraphs." On 
        a typewriter, a double carriage return produces a blank line 
        for this purpose; professional typesetters (or word processing 
        software) may put in an arbitrary vertical space by adjusting 
        leading. 
    </p> 
    Text credits :https://en.wikipedia.org/wiki/Paragraph 
</body> 
</html>

Lưu ý: Bạn có thể xem kết quả của thuộc tính `page-break-before` tốt nhất bằng cách chọn xem trước khi in. Hãy tạo code tương tự trên trình soạn thảo văn bản và chọn xem trước khi in. Hãy thử để hiểu rõ hơn nhé.

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi CSS page-break-before Property được liệt kê dưới đây:

  • Google Chrome 1+
  • Edge 12+
  • Firefox 1+
  • Opera 7+
  • Safari 1.2+

Last Updated : 21/07/2025