CSS - line-break Property

The property line-break is useful in determining how to break lines in a block of text. This is essential as it makes the page more legible and readable.

Possible Values

  • auto: Default line break rule applied.

  • loose: Least restrictive line break rule applied.

  • normal: Most common line break rule applied.

  • strict: Most stringent line break rule applied.

  • anywhere: Allows the browser to apply line break rule anywhere, at any character.

  • initial: Set the initial value.

  • inherit: Inherits the value of the parent element.

Applies to

All the HTML elements.

DOM Syntax

object.style.lineBreak = "strict";

Example

Here is an example:

<html>
<head>
<style>
   p {
      border: 2px solid blue;
      width: 200px;
   }
   .normal {
      line-break: normal;
   }
   .loose {
      line-break: loose;
   }
   .strict {
      line-break: strict;
   }
   .auto {
      line-break: auto;
   }
   .anywhere {
      line-break: anywhere;
   }
</style>
</head>
<body>
   <h2>Line Break</h2>
      <p class="normal">Normal - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text.</p>
      <p class="loose">Loose - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="strict">Strict - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="auto">Auto - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="anywhere">Anywhere - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
</body>
</html>
Advertisements