Feature break-before in CSS

Introduction to the break-before feature in CSS

The break-before feature in CSS allows us to have more control over how pages and lines break in printed documents. This feature is typically used in print and display of long texts, especially when we want to specify how a specific element should be displayed at the beginning of a new page or column. In other words, we can determine whether an element should be broken before appearing on the current page or column.

Generally, the time you use break-before, it can accept values such as always, avoid, left, or right. By selecting these values, you can customize break behavior according to your needs. For example, if you want a title to always appear at the top of a new page, you might use the always value.

This feature is mostly useful in cases where you want your text to be printed or displayed for specific tools, making it relevant. For instance, in creating electronic books or PDF documents, using this feature can help ensure your text is correctly split and more readable for users. Additionally, as web and online content continues to expand, remembering this feature can assist you in improving user experience.

When implementing break-before, you should consider the layout and how it is used across different media. This feature is especially prevalent in CSS3, aimed at becoming a vital tool for designers and developers.

Practical example of the break-before feature

<style>
  .section { 
    break-before: always;
  }
</style>
<div class="section">
  <h2>Title of the new section</h2>
  <p>The text of this section is displayed at the start after breaking before it.</p>
</div>

Code Explanation

Line 1: We use the tag <style> to write CSS.

Line 2: We define the class section to control the break-before property for the elements in this class.

Line 3: The value always is added to break-before, which means this section will always be displayed on a new page.

Line 4: The end of the <style> tag.

Line 5: We create a <div> with the class section.

Line 6: We add an <h2> for the section title.

Line 7: A tag <p> is dedicated to writing the text of this section.

Line 8: The end of the <div> tag.