If you enjoyed this article, get email updates (it's free).
Join over 77,235 Subscribers Today.
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 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.
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 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.
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.
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?
Join over 77,235 Subscribers Today.
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.