文本和之前说的字体有什么区别呢?文本本身是内容,而字体就是用来显示这个内容的。借助text的一系列属性,可以修改文本的位置,添加下划线,改变大小写等等。
缩进和内联对齐
要放在以前,有些网站为了实现段落开头的空格,会将空白的图片放在首字母之前。而有了CSS后就可以直接通过text-indent字段来实现:
text-indent会在第一行设置对应长度的空白,哪怕设置的额为负值:
p {text-indent: 3em;}
一般来说,text-indent对于所有的block元素都是有效的,不能用于inline的元素或是可替代的元素,例如图片。
另外上面提到还可以设置负值,那有什么用呢,来看个例子:
p.hang {text-indent: −25px;}
<img src="star.gif" style="width: 60px; height: 60px;
float: left;" alt="An image of a five-pointed star."/>
<p class="hang"> This paragraph has a negatively indented first
line, which overlaps the floated image that precedes the text. Subsequent lines do not overlap the image, since they are not indented in any way.</p>
另外需要注意的是缩进只针对元素的第一行有效,哪怕你在段落中间添加了换行。而且有意思的是缩进是可以继承的,所以弄得不好就会出现你意想不到的情况:
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">
This first line of the DIV is indented by 50 pixels.
<p>
This paragraph is 200px wide, and the first line of the paragraph is indented 50px. This is because computed values for 'text-indent' are inherited, instead of the declared values.
</p>
</div>
</div>
文本对齐
想必这个大家在平时已经用的很多了:
跟之前类似,text-align也是只作用域block元素。那有人问了,文本的排列不是还有垂直布局么,那这个left和right是啥意思呢?left和right其实是历史遗留的名称,在CSS3中已经改为start和end。来看下具体的例子:
start和end对齐
在CSS3为text-align添加了一些了的新属性,而且连默认值也换了,从原来的left变成了start。这就非常智能了,完全按照语言的书写规范来设置,一般的从左往右书写的就是左边,从右往左书写的就是右边,从上到下书写的就是上边。另外与start对应的就是end,来看个例子:
justify 属性
justify是调整的意思,那么将text-align:justify;有什么功能呢?其实这个调整指的是文本换行时候的行为,到底是断开单词还是换行显示,那如果选择换行,是不是要适当撑开少单词那行的单词间距来保证占满一行。所以看起来这个调整跟浏览器自身关系很大,不同浏览器对调整的行为会有不同。
match-parent
这个属性可能现在浏览器还没有支持,顾名思义就是匹配父元素的的对齐方式。那有人就问啦,这个和inherit有啥区别么?其实是有的,举个例子,如果父元素设置为start,如果是inherit那么子元素也是start,而match-parent就会进行相应的计算和判断,如果是从左往右的书写方向,那么子元素就设置为left。
最后一行的对齐设置
有时候你想要设置最后一行的对齐方式,那么就可以使用text-align-last这个属性:
我们来直观的看个例子:
不过用的时候得注意一个点,什么是最后一行?如果文本中有换行符号,那么换行前的那一行也会认为是最后一行。
机智的小伙伴已经注意到了,如果第一行和最后一行是同一行,那怎么办?答案是text-align-last会替换text-align。像下面这个例子,align的结果就是center。
p {text-align: start; text-align-last: center;}
inline对齐
行高
当把行高应用到block元素的时候,其高度设定的是文本baseline基线间的最小距离,注意这里指的是最小值,而不是一个绝对的值。
下面咱们来考虑下行高的设置,如果给定的默认的normal,那么浏览器会自动计算,可能会有出入,不过一般为1.2倍的字体大小。
来看个例子:
body {line-height: 18px; font-size: 16px;}
p.cl1 {line-height: 1.5em;}
p.cl2 {font-size: 10px; line-height: 150%;}
p.cl3 {line-height: 0.33in;}
<p>This paragraph inherits a 'line-height' of 14px from the body, as well as a 'font-size' of 13px.</p>
<p class="cl1">This paragraph has a 'line-height' of 27px(18 * 1.5), so
it will have slightly more line-height than usual.</p>
<p class="cl2">This paragraph has a 'line-height' of 15px (10 * 150%), so it will have slightly more line-height than usual.</p>
<p class="cl3">This paragraph has a 'line-height' of 0.33in, so it will have slightly more line-height than usual.</p>
行高的继承
有时候咱们会碰到这种情况:
body {font-size: 10px;}
div {line-height: 1em;} /* computes to '10px' */
p {font-size: 18px;}
<div>
<p>This paragraph's 'font-size' is 18px, but the inherited 'line-height' value is only 10px. This may cause the lines of text to overlap each other by a small amount.</p>
</div>
有没有发现行高太窄了,因为p继承了父元素div的行高10px,而自己是18px的font-size。这时候该怎么办呢,可以这样:
body {font-size: 10px;}
div {line-height: 1;}
p {font-size: 18px;}
行高设置为一个数值,其代表的含义就是比例因子,这样的话p就不会继承div里的具体行高,而是使用自己font-size来计算得到对应的行高。
div {line-height: 1.5;}
p {font-size: 18px;}
<div>
<p>This paragraph's 'font-size' is 18px, and since the 'line-height' set for the parent div is 1.5, the 'line-height' for this paragraph is 27px (18 * 1.5).</p>
</div>
垂直对齐文本
在CSS中,vertical-align属性只能应用于inline的元素和可替代的额元素,例如图片和表单input,而且vertical-align无法被继承。
baseline
如果设置veritcle-align:baseline,就会将对齐方式设置为基于父元素的baseline基线对齐。万一对齐的元素没有基线怎么办?那就沿用父元素的基线。
img {vertical-align: baseline;}
<p>The image found in this paragraph <img src="dot.gif" alt="A dot" /> has its
bottom edge aligned with the baseline of the text in the paragraph.</p>
上标和下标
vertical-align: sub将会把内容放到低于baseline的位置,至于低多少依赖于浏览器的设置。super正好是sub的对应,上标,功能类似。
注意,上标和下标的字体大小是不会默认变小的,一般还是继承自父元素。
span.raise {vertical-align: super;}
span.lower {vertical-align: sub;}
<p>This paragraph contains <span class="raise">superscripted</span> and <span class="lower">subscripted</span> text.
</p>
bottom选项
bottom指的是inline box的底部,来看个例子:
.feeder {vertical-align: bottom;}
<p>This paragraph, as you can see quite clearly, contains
a <img src="tall.gif" alt="tall" class="feeder" /> image and a <img src="short.gif" alt="short" class="feeder" /> image, and then some text that is not tall.</p>
上面咱们看到的是bottom字段,而其实,verticle-align:text-bottom也是一种底部对齐,而这个对齐的是文本的底部:
img.tbot {vertical-align: text-bottom;}
<p>Here: a <img src="tall.gif" style="vertical-align: middle;" alt="tall" />
image, and then a <img src="short.gif" class="tbot" alt="short" /> image.</p>
top
top其实是bottom的对立面,而text-top则是text-bottom的对立面:
.up {vertical-align: top;}
.textup {vertical-align: text-top;}
<p>Here: a <img src="tall.gif" alt="tall image"> tall image, and then
<span class="up">some text</span> that's been vertically aligned.</p>
<p>Here: a <img src="tall.gif" class="textup" alt="tall"> image that's been vertically aligned, and then a <img src="short.gif" class="textup" alt="short" /> image that's similarly aligned.</p>
middle
middle选项主要用于图片,而且也不是你想像中的居中,图片的中线位于1/4em到1/2em的中间:
很多浏览器将1ex设置为1/2em,不过并不是全部。
百分比
有人很好奇,对齐的百分比赋值是做什么用的,参考的标准又是什么?其实这个百分比是用来调整基线的,而标准则参考父元素的基线。而在数值上,100%代表的是当前元素的行高。正值抬高元素,负值降低元素。
sub {vertical-align: −100%;}
sup {vertical-align: 100%;}
<p>We can either <sup>soar to new heights</sup> or, instead, <sub>sink into despair...</sub></p>
设置具体长度
例如verticle-align: 5px,这一操作将会将元素抬升5px,反之亦然。
Word Spacing 和 Letter Spacing
word-space属性
该属性用于调整单词内部的间距,所以默认值为0。
正值拉宽,而负值缩短间距:
p.spread {word-spacing: 0.5em;}
p.tight {word-spacing: −0.5em;}
p.base {word-spacing: normal;}
p.norm {word-spacing: 0;}
<p class="spread">The spaces between words in this paragraph will be increased by 0.5em.</p>
<p class="tight">The spaces between words in this paragraph will be decreased by 0.5em.</p>
<p class="base">The spaces between words in this paragraph will be normal.</p> <p class="norm">The spaces between words in this paragraph will be normal.</p>
letter-spacing
该属性的间隔指的是一个word单词里面的字母间的间距。
p {letter-spacing: 0;} /* identical to 'normal' */
p.spacious {letter-spacing: 0.25em;}
p.tight {letter-spacing: −0.25em;}
<p>The letters in this paragraph are spaced as normal.</p>
<p class="spacious">The letters in this paragraph are spread out a bit.</p>
<p class="tight">The letters in this paragraph are a bit smashed together.</p>
另外值得注意的是word-spacing的属性可能会受到text-align的影响,比如text-align设置为justified,那么元素的间距就会自动计算。
文本转换
通过该属性可以将文本转换为大写uppercase,小写lowercase,或者首字母大写capitalize。看个例子:
h1 {text-transform: capitalize;}
strong {text-transform: uppercase;}
p.cummings {text-transform: lowercase;}
p.raw {text-transform: none;}
<h1>The heading-one at the beginninG</h1>
<p> By default, text is displayed in the capitalization it has in the source document, but <strong>it is possible to change this</strong> using
the property 'text-transform'.
</p>
<p class="cummings">
For example, one could Create TEXT such as might have been Written by
the late Poet e.e.cummings.
</p>
<p class="raw">
If you feel the need to Explicitly Declare the transformation of text
to be 'none', that can be done as well.
</p>
文本修饰
在多个选项中,underline和overline是一组,分别在底部和顶部添加line,而line-through顾名思义就是在中间加黑线,类似删除的意思。blink就是闪烁的,比较少见,需要浏览器支持。
p.emph {text-decoration: underline;}
p.topper {text-decoration: overline;}
p.old {text-decoration: line-through;}
p.annoy {text-decoration: blink;}
p.plain {text-decoration: none;}
元素默认都是none的情况,不添加任何装饰,不过也有例外,超链接a就会自带下划线,当然可以通过设置样式来去除:
a {text-decoration: none;}
奇怪的装饰
注意text-decoration是不继承的,所以有时候子元素的装饰会被父元素所遮盖:
p {text-decoration: underline; color: black;}
strong {color: gray;}
<p>This paragraph, which is black and has a black underline, also contains <strong>strongly emphasized text</strong> which has the black underline beneath
it as well.</p>
文本渲染
text-rendering是最近才添加的属性,主要用于部分浏览器支持SVG的特性。
数值optimizeSpeed和optimizeLegibility,顾名思义,代表的是优化的两个方向,一个速度,一个可读性。由于是新属性,所以很多依赖浏览器的实现:
另一个数值geometricPrecision,指导浏览器侧重画出最精细的文本图案。
文本阴影
文本阴影的默认设置就是一个颜色,后面跟三个可选的长度值,前两个长度定义水平和垂直方向的偏移量。来看几个例子:
text-shadow: green 5px 0.5em;
text-shadow: rgb(128,128,255) −5px −0.5em;
刚上面忘说了第三个长度,定义的是模糊半径(blur radius,学过ps的可能很清楚)。不过具体的模糊算法依赖浏览器的实现:
p.cl1 {color: black; text-shadow: gray 2px 2px 4px;}
p.cl2 {color: white; text-shadow: 0 0 4px black;}
p.cl3 {color: black; text-shadow: 1em 0.5em 5px red, −0.5em −1em hsla(100,75%,
25%,0.33);}
处理空白
空白的处理很重要,涉及浏览器处理空格space,换行和tab。
默认的XHTML其实也有处理这块,它的处理规则是将所有的空格都缩短至1个空格,比如:
<p>This paragraph has many spaces in it.</p>
显示出来就是正常的,就等于p{white-space:normal},那如果想要保留空格怎么办,可以使用pre:
p {white-space: pre;}
<p>This paragraph has many spaces in it.</p>
而和pre相对的就是nowrap,坚决不让元素换行,除非使用了
。
<p style="white-space: nowrap;">This paragraph is not allowed to wrap, which means that the only way to end a line is to insert a line-break element. If no such element is inserted, then the line will go forever, forcing the user to scroll horizontally to read whatever can't be initially displayed <br/>in the browser window.</p>
CSS2.1中引入了pre-wrap和pre-line,目的就是更好的控制空格的处理。那这两个有什么区别呢?pre-wrap在pre的基础上支持文本中的换行,而pre-line就会把空格都缩短到1个,但支持换行,来看个例子:
<p style="white-space: pre-wrap;">
This paragraph has a great many s p a c e s within its textual
content, but their preservation will not prevent line
wrapping or line breaking.
</p>
<p style="white-space: pre-line;">
This paragraph has a great many s p a c e s within its textual content, but their collapse will not prevent line
wrapping or line breaking.
</p>
设置tab的大小
默认来说,tab的字符就默认设置为8个空格。如果给的是具体的长度,那么就会用具体的数值来代替,比如tab-size: 10px
换行 和 断字
有时候一行单词特别多,就需要设置断字:
几个选项中最有意思的就属auto了,允许浏览器自动插入横杠的断字符,不过关于如果断字,或者说在那种情况下是合适的根语言本身也有很大关系。
.cl01 {hyphens: auto;}
.cl02 {hyphens: manual;}
.cl03 {hyphens: none;}
<p class="cl01">Supercalifragilisticexpialidocious antidisestablishmentarian ism.</p>
<p class="cl02">Supercalifragilisticexpialidocious antidisestablishmentarian ism.</p>
<p class="cl02">Super­cali­fragi­listic­expi­ali­ docious anti­dis­establish­ment­arian­ism.</p>
<p class="cl03">Super­cali­fragi­listic­expi­ali­ docious anti­dis­establish­ment­arian­ism.</p>
在设置hyphen的时候要格外小心,因为它是继承的,可以通过下面这种方式阻断hyphens的传递:
body {hyphens: auto;}
code, var, kbd, samp, tt, dir, listing, plaintext, xmp, abbr, acronym, blockquote, q, textarea, input, option {hyphens: manual;}
另外可能影响hyphen的另一个属性为word-break:
如果一行文本太长的话,一般就会自动换行,而word-break就可以人为控制这种换行方式。
默认值为normal,浏览器针对不同语言进行换行操作,例如对于拉丁语系来说(比如英语),就以单词为单位进行分隔。但如果是break-all的话,那么哪怕结尾的一个单词中间,也会进行分隔,而且没有分隔符。注意line-break属性也会影响break-all属性。最后看下keep-all,如果没有碰到空格那么就是一个语块,不会换行。
刚说到word-break,而跟其紧密相关的就是line-break:
下面来看看几个不同的选项吧
- loose:在文本换行中应用最宽松的规则,适合在短的文章中,例如报纸排版
- normal:应用普通规则,覆盖大部分情况
- strict:应用最严格规则,但没有准确的定义。
文本换行
在上面介绍完各种换行后,那如果文本还是超出了边框范围怎么办?那就可以使用overflow-wrap属性
这两个选项的功能也很简单,normal允许单词完整输出后换行,而break-work就是把不等单词结束直接换行,而且没有短横杠连接,就像下面这样:
由于历史原因,overflow-wrap和word-wrap有很多功能是重叠的,而浏览器对word-wrap的支持更好点,所以overflow-wrap更多是用于老的兼容:
pre {word-wrap: break-word; overflow-wrap: break-word;}
书写方式
不同的语言其常用的书写方式可能是不同的,比如英语和汉字都是从左到右,从上到下,而像阿拉伯语或是希伯来语则是从右向左,从上到下。
在CSS中可以通过writing-mode来设置:
来看看三种不同的方向:
默认是不支持从下到上的顺序的,但如果一定要实现其实也是可以的:
.flip {transform: rotate(180deg);}
#one {writing-mode: vertical-rl;}
#two {writing-mode: vertical-lr;}
先将元素翻转180度,然后设置从左往右的垂直属性就可以。
改变文本朝向
.verts {writing-mode: vertical-lr;}
#one {text-orientation: mixed;}
#two {text-orientation: upright;}
#thr {text-orientation: sideways;}
声明文本方向
回到CSS2.0的时代,其中有两个属性是可以来改变行内基线的方向的:direction和unicode-bidi
对于需要从右向左的语言可以提前设置:
*:lang(ar), *:lang(he) {direction: rtl;}
Unicode相比CSS提供更强的方向操作
小结
除了font-face可以设置文本的样式外,css本身也提供了非常多的辅助属性,包括添加下划线,改变文本间距,缩进,对齐,换行等等,甚至可以改变行间距。又由于web中大量出现的文本,所以这些属性提供的功能还是非常强大的,让我们期待文本中更加有趣的属性在未来被引入把。