New CSS3 Properties For Better Text And Word Wrapping

Posted in Tips, Web Design2 years ago • Written by 9 Comments

CSS, or Cascading Style Sheets is, alongside HTML, the very basics of web design. It was first designed to enable separation of document content and allow web pages to be displayed differently depending on the screen size of the device, or depending on the device itself.

CSS is maintained by the World Wide Web Consortium (W3C)… and it is exactly maintaining we will talk about today.

The first CSS specification was used 16 years ago, with the first addition coming two years later. From 1998 to 2011 there wasn’t a new CSS specification. In 2011 CSS 2.1 was released, after a long period of development, while W3C also worked on the new CSS, version 3.0.

CSS3 is the one we use today. If you can believe it, its first drafts were published back in 1999, so after a 12 years period of development, you would expect the stylesheet to work wonders. And we all know it does.

The word-wrap features were the last big addition to CSS3 and it was something CSS 2.1 didn’t feature. It also works in all major browsers, including old Internet Explorer. However, word-wrap has been removed from CSS3 and, instead of it, some other properties were added.

Text-wrap

Text-wrap is one of those new properties. There are three options to it: normal, none and avoid.

The normal property is the default value and it happens when no settings are specified. Any text wrapping you see out there right now is the equivalent of text-wrap: none;.

When the property is set to none, this tells the browser that text in the specified element should not break at all. This has something to do with overflowing and the overflow property. Once text reaches the end of the container, it will overflow its parent.

The last value, avoid, allows line breaking to happen, but also tells the browser to be selective about where breaks should happen. This is a smart idea, but it might not work so well – you can’t always base your decisions on the browser’s engine.

Talking about browsers, there is unfortunately no browser out there supporting the new text-wrap properties, so you might want to wait for a while until you will use them.

Overflow-wrap

The second new property is overflow-wrap and is the complete replacement for word-wrap. Its values are normal and break-word.

This property is for words which are too long and don’t have enough space in the container. The property specifies to the browser if it may break a word or not.

Image by bluehor.

Note that if text-wrap is set to none, then overflow-wrap has no effect. Words will also not be hyphenated – for this wait a bit more, I will talk about it later on.

There is unfortunately no support for this property either, so wait with it for a while.

Word-break and line-break.

Browsers always assume words and lines should brake according to the English language way of doing it. The rule of words breaking only when there is a space or a punctuation mark doesn’t always apply, there are some languages where this is not the case.

There is no support for this property either yet, but it also seems like it will only be useful to people dealing with content which has other rules than in English – that is other languages. It also seems that the property needs some more working on, as it is quite unclear.

Text-overflow

Text-overflow is not entirely a new property. It allows clip and ellipsis as its only two values. The property defines how to handle text that overflows its parent container.

Clip is the default value and tells the browser to cut off text and leave the remaineder invisible. It is also happening by default in all browsers now. Note that for this property to work, the text will have to be inside an element that doesn’t allow natural line breaking. To be honest I don’t get this one and look forward to it being worked on.

The second property, ellipsis, tells the browser to cut off the text, but show an ellipsis (“…”) to indicate there is some text that is not visible.

Unlike the other new properties, this one is supported by all major browsers: IE6+, Chrome, Firefox 7+, Safari 1.3+ and Opera 11+. As you can see, there is not much support for older versions, but newer ones will always work well with text-overflow.

Hyphens

These are new in CSS3 and indicate how and if browsers should insert hyphens. None, manual and auto are its three properties. The first one tells the browser to never hyphenate words. Note that this is not the default property and browsers do not hyphenate words even if break points are defined.

Manual is the default property. The browser always avoids hyphenating unless hyphenation characters are indicated and waits for the designer to do it. There is always a way more to hyphenate words: manually. You can do it by inserting the soft hyphenation character, which is ­. A hyphenated word would look like this in HTML: de­signer.

Image by indiamos.

The auto property tells the browser to automatically insert word breaks and hyphenation in accordance to the defined language. I don’t know how well this works with languages other than English, but it might be worth trying.

There is some browser support for hyphenation: IE10+, Firefox 6+ and Safari 5.1+. It lacks, however, support for older IE and Safari browsers and more importantly for Opera and Chrome.

Bottom line

There is not much support for all these new properties, however it is really assuring to know W3C still works on CSS3, although CSS4’s first draft has already been submitted.

Until next time… what do you think about the new CSS3 properties? Have you already used some of them, or the lack of support stopped you from doing this? Is there something else you might want W3C to implement for text formatting?

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

9 Comments Best Comments First
  • Paul

    Thursday, March 8th, 2012 14:51

    1

    Thanks for the info. Overflow-wrap is such a useful property.

    0
  • Gaurav

    Friday, March 9th, 2012 06:32

    4

    Really Awesome Tutorial for web designers and developers. thanks for providing this nice and useful information.

    0
  • S Abdul Khaliq

    Friday, March 9th, 2012 09:31

    3

    Great information. hats off to you for sharing it.

    0
  • Donny

    Thursday, March 8th, 2012 12:26

    2

    I have been reading everything I can find about CSS3 lately.

    Thanks for the share Vasile.

    0
  • Ory

    Friday, March 9th, 2012 09:17

    5

    Awesome New CSS3 Properties.Its really better than word wrapping.

    0
  • Crowes

    Friday, March 9th, 2012 13:44

    6

    It’s great to be able to bump with informative post like this. Thank you for sharing this information! CSS3 properties seem to be interesting, I’ll try to further research on this to be much more familiar.

    0
  • Sanjeev

    Monday, June 4th, 2012 12:09

    9

    Awesome Article..

    0
  • Grim Cris

    Saturday, March 10th, 2012 09:11

    8

    I didn’t know about these. Thank you!

    P.S.: Why 1stwebdesigner.com call me an username and password when I’m trying to read something? I press „Cancel” everytime, but this is pretty annoying.

    0
  • waqas

    Friday, March 9th, 2012 17:03

    7

    CSS is here to stay so, one should better get on to it…it is useful info so read it for good!

    0
  • Sanjeev

    Monday, June 4th, 2012 12:09

    9

    Awesome Article..

    0
  • Grim Cris

    Saturday, March 10th, 2012 09:11

    8

    I didn’t know about these. Thank you!

    P.S.: Why 1stwebdesigner.com call me an username and password when I’m trying to read something? I press „Cancel” everytime, but this is pretty annoying.

    0
  • waqas

    Friday, March 9th, 2012 17:03

    7

    CSS is here to stay so, one should better get on to it…it is useful info so read it for good!

    0
  • Crowes

    Friday, March 9th, 2012 13:44

    6

    It’s great to be able to bump with informative post like this. Thank you for sharing this information! CSS3 properties seem to be interesting, I’ll try to further research on this to be much more familiar.

    0
  • Ory

    Friday, March 9th, 2012 09:17

    5

    Awesome New CSS3 Properties.Its really better than word wrapping.

    0
  • Gaurav

    Friday, March 9th, 2012 06:32

    4

    Really Awesome Tutorial for web designers and developers. thanks for providing this nice and useful information.

    0
  • S Abdul Khaliq

    Friday, March 9th, 2012 09:31

    3

    Great information. hats off to you for sharing it.

    0
  • Donny

    Thursday, March 8th, 2012 12:26

    2

    I have been reading everything I can find about CSS3 lately.

    Thanks for the share Vasile.

    0
  • Paul

    Thursday, March 8th, 2012 14:51

    1

    Thanks for the info. Overflow-wrap is such a useful property.

    0

Comments are closed.

54.226.188.142 - unknown - unknown - US