Justify is one available value for the text-align
property.
It allows the formatting of text in a style often used in newspaper design.
In this episode, we’ll look at the 12 possible values for text-align, one of which is justify, next we’ll look at using justified text with CSS columns and finally look at how justify
can be used to create a floatless responsive grid system with just a few lines of code.
Text Align
The text-align
property performs a very familiar action of aligning text. Anyone who has read words on a page or used a word processor will be familiar with the idea of left, center or right aligned text.
These are the 3 most common values used with text-align
but there are others too.
- left
- right
- center
- justify
- start
- end
- start end
- match-parent
<string>
- start
<string>
<string>
end- inherit
The start
and end
keywords are similar to left
and right
but take the direction
of text into account. If the language is left-to-right, start
and left
are equivalent. If the text direction is rtl
then start
and right
are equivalent.
The match-parent
value is similar to inherit
but the start
and end
are calculated according to the parent’s direction
. This value has poor browser support but does work in Chrome.
The <string>
values allow alignment to be determined by an arbitrary string of text. This value is currently not supported in any browser, so I wasn’t able to test it. The example on MDN sounds quite useful though to align decimal values on the “.” full-stop string.
Continue reading %AtoZ CSS Screencast: Justify Text%
by Guy Routledge via SitePoint
No comments:
Post a Comment