CSS Word Wrap

The CSS word wrap property is used to define to break long word and wrap into the next line. It defines to prevent overflow when the content is too long to fit in the container or the browser is allowed to line break within words.

CSS Syntax:
word-wrap: normal|break-word|initial|inherit;

CSS Word Wrap Values

Value	Description
Normal	It is used to break words only at allowed break points.
Break-word	It is used to allow unbreakable words to be break.
Initial	It set this property to its default value.
inherit	It is used to specify that elements inherit this property from its parent element

Let's take an Example of CSS word-wrap :

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px; 
  border: 1px solid #000000;
   background:#bef7eb;
}
div.a {
  word-wrap: normal;
}
div.b {
  word-wrap: break-word;
}
</style>
</head>
<body>
<h1>The word-wrap Property</h1>
<div class="a"> Welcome to phptpoint: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
<h2>word-wrap: break-word:</h2>
<div class="b"> Welcome to phptpoint: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
</body>
</html>

Output:

The word-wrap Property

Welcome to phptpoint: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

word-wrap: break-word:

Welcome to phptpoint: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads