第16篇 文本属性之首行缩进与文本对齐

248 阅读3分钟

块级方向与行内方向

块级方向:当前书写模式放置块级元素的方向。例如:中文中的段落是从上到下放置的,块级方向就是自上而下,纵向的。

行内方向:块级元素中的行内元素的书写方向。例如:现代中文段落中的文字是从左到右书写的,那行内方向便为自左而右。反之古代牌匾是自右而左。

首行缩进text-indent

作用

该属性能定义一个块元素首行文本前的缩进量。

属性值

  • <length>:使用固定的值指定缩进量。可以使用负值,这样表示前移首行。
  • <percentage>:使用当前块元素的宽度的百分比作为缩进

初始值、可动画性与可继承性

初始值为0,可动画、可继承

适用场景

可以用在任何块级元素上,缩进会延行内方向展开。

但是无法用在行内元素或置换元素【例如图像、之类的】上。

文本对齐text-align

作用

该属性控制块级元素中各行内文本的对齐方式。【只控制内容,不控制它本身】

适用元素

块级元素

初始值、可动画性与可继承性

不可动画、可继承

初始值为start,或者一个无名值,该无名值的效果为:如果浏览器不支持 start,且 direction 为 ltr,则为 left; 如果 direction 为 rtl,则为 right

属性值

  • start :如果行内方向是左至右,则等于left,反之则为right
  • end :与start相反
  • left : 行内内容向左侧边对齐
  • right :与left相反
  • center :内容局中
  • justify : 文字向两侧对齐,对最后一行无效。
  • match-parentinherit类似,区别在于startend的值根据父元素的direction确定,并被替换为恰当的leftright。【但是inherit则计算值为父元素的值,不会进行转换】
  • justify-all 和 justify 一致,但是强制使最后一行两端对齐。

其中 justify 与 justify-all 的效果是:文本的两端要和父元素的content边界对齐,单词和字母之间的空白会做调整,保持每一行长度完全一致。

对于left和right碰到块级方向为纵向的元素时,left对应起边,right对应终边

对其最后一行text-align-last

作用

一段文本【此处的一段文本指的是换行元素<br>的前面的文本或是块元素中的文本】中最后一行在被强制换行之前的对齐规则。

适用元素、可继承性与可动画性

块级元素,可继承,不可动画

属性值

  • auto:当text-align的值为非justify时,该属性指定的对其方向和text-align指定的对其方向一致,否则,效果和该属性的值设置为start一样。
  • start:当文本方向为ltr时,左对齐,文本方向为rtl时,右对齐。
  • end:与start相反
  • left:对齐行框的左边界
  • right:与left相反
  • center:向行框的中央对齐。
  • justify:文本的边缘应该跟段落的左右边界线对齐。造成的效果如下图1最后一行,文字间距明显拉开,但是若是一个单词则单词的字母间距不会拉开,效果如图2;但是单词间的间距会拉开,效果如图3