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 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.

Share:
Share on Facebook0

Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit0

Leave a Reply

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

Most Popular Posts

The Readers’ Poll – December 2012

Posted on 4 years ago

Bhumi

What Are WordPress Nonces?

Posted on 1 year ago

Bhumi

How to Create ShortCode in WordPress

Posted on 5 years ago

Bhumi

How to add Search By Category In WordPress

Posted on 8 months ago

Bhumi

HTML5 Geolocation API with Example

Updated 17 years ago

Bhumi

Overview of Views in MySQL

Updated 17 years ago

Bhumi

What is Closure in JavaScript?

Updated 17 years ago

Bhumi

How to use JavaScript Promise API?

Updated 17 years ago

Bhumi

Type Hinting Callable Functions in PHP

Updated 17 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 1 year ago

Bhumi

The Reader’s Poll – August 2014

Posted on 2 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 2 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 3 years ago

Bhumi