Back to Top

Difference between word-wrap,word-break and white-space?

css 3 properties word-wrap,word-space and word-break

Here I come with the quick new article about some useful CSS Property which might confuse you when you are going to Let’s understand and clear CSS Properties as follows:

CSS3 has property on text effects like CSS3 Text-Shadow, Text-overflow describes the text-shadow, text annotation usage.Today You will learn the CSS3 property which is used to wrap long text and for that word-wrap is used while CSS also support word-break and white-space to introduce two properties put together because these properties often confused you and you’re not sure what areas need to use the word-wrap property, when you should use word-break property, even when can use white-Space .To answer all questions, today I will put them together in this article with the example.

Here,take a look at what word-wrap property is and then how to use in practice,I will start with the syntax and then step by step check the examples to deepen understanding of word-wrap and other properties.


The word-wrap property is used to break the long words and wrap it to the next line.First You check the syntax of word-wrap with parameter description


 Word-wrap: normal | break -word

Parameters Description:

  1. normal is the default value and it is normal continuous text without wraps.
  2. break-word is break the content within the borders of wrap.It is not like english word wrap to truncate the word, to cut off the english word wrap css provide to use word-break.



word-break: normal;


Word-wrap is normal effect and text are wider than the width of the box when the box stretched out.It is normal when setting its value overrides the value of it’s previously established.

This property makes long text does not wrap box bursting extend to the outside, if your design requires the element content does not wrap effect, you can use keep-all to achieve. In other words, it is best to wrap the line and should not be within the word wrap, so that the best way is to use break-word.

Compatible browsers

Firefox and Opera browsers do not support the two word-break property.When more than one word-wrap: break-word property is used with the pre and table tag does not wrap in Firefox and opera.


 white-Space : normal | nowrap | pre-Line | pre-wrap | inherit

Parameter Description

  1. normal: Its a default parameter. The space will be ignored by browsers often can be restored to default values ​by setting its values. ​
  2. pre: The space will be retained by the browser, their behavior is similar to HTML in the pre tag.
  3. nowrap: The text does not wrap on the same line until it came to a new line tag
    So far.
  4. pre-line: To merge whitespace sequences but retain the line breaks. This property does not support IE7, Firefox30, Opera9.2 next to the version of the browser
  5. pre-wrap: To leave blank character sequence but normally wrap this attribute value unsupported technology IE7, Firefox3 version of the browser
  6. inherit: It should inherit the white-space property value from the parent element and the value of this property is not supported in all versions of IE.

Word-wrap and break-word are created no effect in the table so to resolve this issue and to support this property, add the following properties in table:

  table { table-layout : fixed; width : 150 px; / * Set the table width * / }

That’s it.I have explained about word-wrap,word-break and white-space CSS property here. If you have any query or comment, please contact us via the ​comment section.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to use HTML5 AutoFocus attribute

Posted on 4 years ago


How to prepare and execute PHP PDO queries

Posted on 3 years ago


What are Lambdas and Closures in PHP?

Posted on 2 years ago


How to add custom post type in RSS Feed?

Posted on 5 years ago


Hello world

Updated 1 week ago

Nick Carter

In depth Understanding of Laravel Core

Updated 2 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 4 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 5 years ago