HTML and CSS Reference
In-Depth Information
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.
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 e
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.
Search WWH ::

Custom Search