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

Here I come with the quick new article about some useful CSS Property which might confuse you when you are going to use.so 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.

Word-wrap

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

SYNTAX:

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

SYNTAX:

EXAMPLE:

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

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:

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.