word-wrap - HTML CSS CSS Property

HTML CSS examples for CSS Property:word-wrap

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

Description

The word-wrap CSS property sets the line breaks within the word to prevent the overflow.

The following table summarizes the word-wrap Property.

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

Syntax

The syntax of the property is as follows: 


word-wrap:      normal | break-word | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
normal Lines may only break at normal word break points. This is default value.
break-word Force an unbreakable word to wrap in a new line in order to prevent overflow, if there are no acceptable break points in the line.
initialSets this property to its default value.
inherittake the value of its parent element word-wrap property.

The example below shows the word-wrap property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 word-wrap Property</title>
  <style type="text/css">
    p {<!--  w w  w.ja v  a  2  s.  c om-->
    width: 200px;
    padding: 10px;
    background: #90ee90;
    word-wrap: break-word;
  }
</style>
 </head>
 <body>
  <p>This paragraph contains a veryveryveryveryveryveryveryverylongword. The long word will automatically break and wrap to the next line.</p>
 </body>
</html>

Related Tutorials