HTML and CSS Reference
In-Depth Information
FIGURE 3.15
Witness the power of my
automatic hyphens!
Let's look at my
hyphens.html
example, which has the following properties
set on the paragraphs:
p {
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
hyphens: auto;
}
I've hidden the overflowing text and set
text-overflow: ellipsis
as with
previous examples. However, this time I've also set the text to be justified and set
automatic hyphens. This produces an effect like that shown in
Figure 3.15
.
NOTE:
In the future you'll be able to specify exactly which character the
browser uses for its automatic hyphens using the
hyphenate-character
property; for example,
hyphenate-character: “\2010”;
. The values are
unicode references to glyphs.
HYPHENATION IN OLDER BROWSERS
To u s e a u it To m at i c hy p h e in at i To in i in in To in s u p p To r it i in g b ro ws e rs , yo u c a in b u i l d i it i in w i it h
JavaScript. The Sweet Justice library (se
ehttps://github.com/aristus/sweet-justice)
provides this script for you. You just need to include the JavaScript file at the bottom
of your markup along with jQuery or YUI3. Yes, it works on top of another JavaScript
library, which could result in some page bloat. Other disadvantages include the
fact that you must include a specific class on each element that you want justified.
