图解 CSS (6): text - 文本格式

最新推荐文章于 2020-06-11 17:05:44 发布

weixin_34408624

最新推荐文章于 2020-06-11 17:05:44 发布

阅读量107

点赞数

原文链接：https://my.oschina.net/hermer/blog/320369

版权

为什么80%的码农都做不了架构师？>>>

line-height
word-spacing
letter-spacing
text-align
vertical-align
text-indent
white-space
word-wrap
word-break
text-transform
direction
unicode-bidi
writing-mode
text-decoration
text-underline-position
text-justify

layout-flow
layout-grid
layout-grid-mode
layout-grid-type
layout-grid-line
layout-grid-char
layout-grid-char-spacing 

已废弃的或测试失败的:
text-shadow
text-autospace
text-kashida-space

line-height(行高): normal(默认)、数值或百分比.

word-spacing(字间距): normal(默认)、数值或百分比.

letter-spacing(字符间距): normal(默认)、数值.

text-align(横向对齐): left(默认)、right、center、justify(两端对齐).

vertical-align(纵向对齐):
baseline(基线)、top、text-top、bottom、text-bottom、middle、sub(下标)、super(上标)、数值或百分比.

baseline 对齐是默认:

没看出 top 和 text-top 的区别:

bottom 和 text-bottom 应该差不多, 但 bottom 好像不对劲:

middle、sub、super:

还可以使用数值或百分比:

text-indent(段首缩进):

white-space: normal(默认)、pre(IE下无效)、nowrap(禁止自然换行).

word-wrap: normal(默认)、break-word(根据边界换行).

word-break(控制单词换行):
normal(默认, 换行是考虑英文单词边界)、
break-all(不管单词边界根据容器大小换行)、
keep-all(这个厉害, 容不下中文的一句话就换行; 句子是用空白和标点区分的).

text-transform(大小写控制): none(默认)、capitalize(首字母大写)、uppercase(全大写)、lowercase(全小写).

direction(ltr、rtl) 与 unicode-bidi(normal、bidi-override、embed)

writing-mode: lr-tb(默认)、tb-rl.

text-decoration: none、underline(下画线)、overline(上画线)、line-through(中画线)、blink(闪烁, IE 不支持).

text-underline-position: above、auto、auto-pos、below.
text-underline-position 存在的理由应该是让 text-decoration 画的线可以自定义位置, 但现在基本不可用.
只可以把 text-decoration: underline; 指定的下划线弄到上面去, 暂时有点多余.

text-justify: auto、inter-word、inter-ideograph、newspaper、distribute、distribute-all-lines.

这是关于文本两端对齐的更多控制, 需要先: text-align: justify;

没看出 auto、inter-word、inter-ideograph 有区别, 都似默认效果:

newspaper:

distribute:

distribute-all-lines:

:first-letter(单独给首字母定义样式)

:first-line(单独给首行定义样式)

layout-flow: horizontal、vertical-ideographic;

layout-grid-mode: both、line、char、none;
layout-grid-type: loose、strict、fixed;
layout-grid-line: none、auto、length;
layout-grid-char: none、auto、length;
layout-grid-char-spacing : auto、length;