word-break - HTML CSS CSS Property

HTML CSS examples for CSS Property:word-break

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. word-break

Description

The word-break CSS property sets how to break lines within words.

The following table summarizes the word-break Property.

Item Value
Default value: normal
Applies to:All elements
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


word-break:      normal | break-all | keep-all | initial | inherit

Property Values

The following table describes the values of this property.

ValueDescription
normalWords break according to their usual rules.
break-all Lines may break between any two letters.
keep-all Breaks are prohibited between pairs of letters.
initial Sets this property to its default value.
inherit take the value of its parent element word-break property.

The example below shows the word-break property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 word-break Property</title>
  <style type="text/css">
    p.line1 {<!--from   ww w  .j  a  v  a  2s .c om-->
    width: 150px;
    padding: 10px;
    background: #90ee90;
    word-break: break-all;
  }
  p.line2 {
    width: 150px;
    padding: 10px;
    background: #efa38f;
    word-break: keep-all;
  }
</style>
 </head>
 <body>
  <p class="line1">The line of this paragraph may break at any character.</p>
  <p class="line2">The line of this paragraph will-break-at-hyphenates.</p>
 </body>
</html>

Related Tutorials