Css权威指南(4th,第四版中文翻译)-6.文本属性

文本和之前说的字体有什么区别呢?文本本身是内容,而字体就是用来显示这个内容的。借助text的一系列属性,可以修改文本的位置,添加下划线,改变大小写等等。

缩进和内联对齐

要放在以前,有些网站为了实现段落开头的空格,会将空白的图片放在首字母之前。而有了CSS后就可以直接通过text-indent字段来实现:

t6-1.png

text-indent会在第一行设置对应长度的空白,哪怕设置的额为负值:

p {text-indent: 3em;}
6-1.png

一般来说,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>
6-2.png

另外需要注意的是缩进只针对元素的第一行有效,哪怕你在段落中间添加了换行。而且有意思的是缩进是可以继承的,所以弄得不好就会出现你意想不到的情况:

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>
6-4.png

文本对齐

想必这个大家在平时已经用的很多了:


t6-2.png
6-5.png

跟之前类似,text-align也是只作用域block元素。那有人问了,文本的排列不是还有垂直布局么,那这个left和right是啥意思呢?left和right其实是历史遗留的名称,在CSS3中已经改为start和end。来看下具体的例子:


6-6.png

start和end对齐

在CSS3为text-align添加了一些了的新属性,而且连默认值也换了,从原来的left变成了start。这就非常智能了,完全按照语言的书写规范来设置,一般的从左往右书写的就是左边,从右往左书写的就是右边,从上到下书写的就是上边。另外与start对应的就是end,来看个例子:

6-7.png

justify 属性

justify是调整的意思,那么将text-align:justify;有什么功能呢?其实这个调整指的是文本换行时候的行为,到底是断开单词还是换行显示,那如果选择换行,是不是要适当撑开少单词那行的单词间距来保证占满一行。所以看起来这个调整跟浏览器自身关系很大,不同浏览器对调整的行为会有不同。

match-parent

这个属性可能现在浏览器还没有支持,顾名思义就是匹配父元素的的对齐方式。那有人就问啦,这个和inherit有啥区别么?其实是有的,举个例子,如果父元素设置为start,如果是inherit那么子元素也是start,而match-parent就会进行相应的计算和判断,如果是从左往右的书写方向,那么子元素就设置为left。

最后一行的对齐设置

有时候你想要设置最后一行的对齐方式,那么就可以使用text-align-last这个属性:


t6-3.png

我们来直观的看个例子:


6-9.png

不过用的时候得注意一个点,什么是最后一行?如果文本中有换行符号,那么换行前的那一行也会认为是最后一行。

机智的小伙伴已经注意到了,如果第一行和最后一行是同一行,那怎么办?答案是text-align-last会替换text-align。像下面这个例子,align的结果就是center。

p {text-align: start; text-align-last: center;}

inline对齐

行高

t6-4.png

当把行高应用到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>
6-11.png

行高的继承

有时候咱们会碰到这种情况:

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>
6-12.png

有没有发现行高太窄了,因为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>

6-13.png

垂直对齐文本

在CSS中,vertical-align属性只能应用于inline的元素和可替代的额元素,例如图片和表单input,而且vertical-align无法被继承。


t6-5.png

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>
6-14.png

上标和下标

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>
6-15.png

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>
6-16.png

上面咱们看到的是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>
6-17.png

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>
6-18.png

middle

middle选项主要用于图片,而且也不是你想像中的居中,图片的中线位于1/4em到1/2em的中间:


6-19.png

很多浏览器将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>
6-20.png

设置具体长度

例如verticle-align: 5px,这一操作将会将元素抬升5px,反之亦然。

6-21.png

Word Spacing 和 Letter Spacing

word-space属性

该属性用于调整单词内部的间距,所以默认值为0。


t6-6.png

正值拉宽,而负值缩短间距:

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>
6-22.png

letter-spacing

该属性的间隔指的是一个word单词里面的字母间的间距。


t6-7.png
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>
6-24.png

另外值得注意的是word-spacing的属性可能会受到text-align的影响,比如text-align设置为justified,那么元素的间距就会自动计算。


文本转换

t6-8.png

通过该属性可以将文本转换为大写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>
6-27.png

文本修饰

t6-9.png

在多个选项中,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;}
6-29.png

元素默认都是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>
6-30.png

文本渲染

text-rendering是最近才添加的属性,主要用于部分浏览器支持SVG的特性。


t6-10.png

数值optimizeSpeed和optimizeLegibility,顾名思义,代表的是优化的两个方向,一个速度,一个可读性。由于是新属性,所以很多依赖浏览器的实现:

6-34.png

另一个数值geometricPrecision,指导浏览器侧重画出最精细的文本图案。


文本阴影

t6-11.png

文本阴影的默认设置就是一个颜色,后面跟三个可选的长度值,前两个长度定义水平和垂直方向的偏移量。来看几个例子:

text-shadow: green 5px 0.5em;
text-shadow: rgb(128,128,255) −5px −0.5em;
6-35.png

刚上面忘说了第三个长度,定义的是模糊半径(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);}
6-36.png

处理空白

空白的处理很重要,涉及浏览器处理空格space,换行和tab。


t6-12.png

默认的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>
6-37.png

而和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>
6-38.png

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>
6-39.png

设置tab的大小

t6-13.png

默认来说,tab的字符就默认设置为8个空格。如果给的是具体的长度,那么就会用具体的数值来代替,比如tab-size: 10px


6-40.png

换行 和 断字

有时候一行单词特别多,就需要设置断字:


t6-14.png

几个选项中最有意思的就属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&#xad;cali&#xad;fragi&#xad;listic&#xad;expi&#xad;ali&#xad; docious anti&#xad;dis&#xad;establish&#xad;ment&#xad;arian&#xad;ism.</p>
<p class="cl03">Super&#xad;cali&#xad;fragi&#xad;listic&#xad;expi&#xad;ali&#xad; docious anti&#xad;dis&#xad;establish&#xad;ment&#xad;arian&#xad;ism.</p>
6-41.png

在设置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:


t6-15.png

如果一行文本太长的话,一般就会自动换行,而word-break就可以人为控制这种换行方式。
默认值为normal,浏览器针对不同语言进行换行操作,例如对于拉丁语系来说(比如英语),就以单词为单位进行分隔。但如果是break-all的话,那么哪怕结尾的一个单词中间,也会进行分隔,而且没有分隔符。注意line-break属性也会影响break-all属性。最后看下keep-all,如果没有碰到空格那么就是一个语块,不会换行。

刚说到word-break,而跟其紧密相关的就是line-break:


t6-16.png

下面来看看几个不同的选项吧

  • loose:在文本换行中应用最宽松的规则,适合在短的文章中,例如报纸排版
  • normal:应用普通规则,覆盖大部分情况
  • strict:应用最严格规则,但没有准确的定义。

文本换行

在上面介绍完各种换行后,那如果文本还是超出了边框范围怎么办?那就可以使用overflow-wrap属性


t6-17.png

这两个选项的功能也很简单,normal允许单词完整输出后换行,而break-work就是把不等单词结束直接换行,而且没有短横杠连接,就像下面这样:


6-43.png

由于历史原因,overflow-wrap和word-wrap有很多功能是重叠的,而浏览器对word-wrap的支持更好点,所以overflow-wrap更多是用于老的兼容:

pre {word-wrap: break-word; overflow-wrap: break-word;}

书写方式

不同的语言其常用的书写方式可能是不同的,比如英语和汉字都是从左到右,从上到下,而像阿拉伯语或是希伯来语则是从右向左,从上到下。
在CSS中可以通过writing-mode来设置:


t6-18.png

来看看三种不同的方向:


6-44.png

默认是不支持从下到上的顺序的,但如果一定要实现其实也是可以的:

.flip {transform: rotate(180deg);} 
#one {writing-mode: vertical-rl;} 
#two {writing-mode: vertical-lr;}

先将元素翻转180度,然后设置从左往右的垂直属性就可以。


6-45.png

改变文本朝向

t6-19.png
.verts {writing-mode: vertical-lr;} 
#one {text-orientation: mixed;} 
#two {text-orientation: upright;} 
#thr {text-orientation: sideways;}
6-49.png

声明文本方向

回到CSS2.0的时代,其中有两个属性是可以来改变行内基线的方向的:direction和unicode-bidi

t6-20.png

对于需要从右向左的语言可以提前设置:

*:lang(ar), *:lang(he) {direction: rtl;}

Unicode相比CSS提供更强的方向操作


t6-21.png

小结

除了font-face可以设置文本的样式外,css本身也提供了非常多的辅助属性,包括添加下划线,改变文本间距,缩进,对齐,换行等等,甚至可以改变行间距。又由于web中大量出现的文本,所以这些属性提供的功能还是非常强大的,让我们期待文本中更加有趣的属性在未来被引入把。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • Menu css术语 后代选择器 兄弟选择器 属性选择器 伪类 伪元素 选择器优先级 web安全色 字体font-...
    ft207741阅读 585评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,985评论 1 4
  • 一,HTML有N多标签,根据显示的类型,主要可以分为3大类 1,块级标签 独占一行的标签 能随时设置宽度和高度(比...
    张不二01阅读 722评论 0 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,027评论 0 1
  • CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 1,096评论 0 0