CSS---文本相关属性

Posted 2022-01-04 appskyy

text-transform

检索或设置对象中的文本的大小写。

属性值

• none：无转换
• capitalize：将每个单词的第一个字母转换成大写
• uppercase：将每个单词转换成大写
• lowercase：将每个单词转换成小写
• full-width：将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）

white-space

设置或检索对象内空格的处理方式。

属性值

• normal：默认处理方式。
• pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
• nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
• pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

tab-size

检索或设置对象中的制表符的长度。

属性值

• <integer>：用整数值指定制表符的长度。不允许负值。
• <length>：用长度值指定制表符的长度。不允许负值。

word-break

设置或检索对象内文本的字内换行行为。

• 对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all；
• 作为IE的私有属性之一，IE5.5率先实现了 word-break ，后期被w3c采纳成标准属性；

属性值

• normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
• keep-all：与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
• break-all：该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

word-wrap

设置或检索当内容超过指定容器的边界时是否断行。

• 作为IE的私有属性之一，IE5.5率先实现了 word-wrap ，后期被w3c采纳成标准属性；
• CSS3中将 word-wrap 改名为 overflow-wrap；

属性值

• normal：允许内容顶开或溢出指定的容器边界。
• break-word：内容将在边界内换行。如果需要，单词内部允许断行。

overflow-wrap

设置或检索当内容超过指定容器的边界时是否断行。

• CSS3中将 word-wrap 改名为 overflow-wrap；
• 由于历史原因，当你使用 overflow-wrap 时，最好同时使用 word-wrap 作为备选，作向前兼容。

属性值

• normal：允许内容顶开或溢出指定的容器边界。
• break-word：内容将在边界内换行。如果需要，单词内部允许断行。

text-align

设置或检索对象中内容的水平对齐方式。

• 块级元素的文本是一些堆叠的线框
• 要使得 text-align 的 justify 两端对齐生效，需要在汉字间插入有空白，如空格；
• 块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行，其两端对齐需使用 text-align-last；
• IE浏览器下，如果 text-align-last 要生效，必须先定义 text-align 为justify；
• 单行两端对齐效果变得比较简单：

css code：

lioverflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;
li:afterdisplay:inline-block;overflow:hidden;width:100%;height:0;content:‘‘;

 

html code：

<ul>
　　<li>我 是 谁</li>
　　<li>你 又 是 谁</li>
　　<li>世 界 末 日 2012</li>
</ul>

 

以上代码3个li中的内容都将两端对齐

需注意几点：

• 所有主流浏览器都支持 text-align 的 justify 属性值；
• text-align不处理强制打断的行，也不处理块内的最后一行，换句话说，如果块内仅有一行文本（该行既是第一行也是最后一行），这时仅设置text-align:justify无法让该行两端对齐；
• text-align-last 是用来处理块内的最后一行和强制打断的行的，所以当要设置单行文本两端对齐时，需使用 text-align-last；
• 非Firefox浏览器要使得两端对齐生效，需在文本间插入空白，如空格（如果一行仅有2个汉字，Firefox也需在之间插入空白）；
• Chrome23, Safari5.1.7, Opera12.5 尚不支持 text-align-last；

依据上述的点，要实现单行两端对齐，可以走2个方向：

1. 由于所有浏览器都支持 text-align 的 justify 属性值，但不全支持 text-align-last，我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容（IE7及以下浏览器不支持伪对象，使用text-align-last处理），置于第二行并将其隐藏，这时第一行文本（即要对齐的那个单行文本）可使用text-align:justify来对齐
2. 支持 text-align-last 的浏览器，如IE, Firefox使用 text-align-last 处理，不支持的浏览器使用如上述方法处理；

所以就目前情况来看，使用第一种方案是比较简约的，可以轻易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera

属性值

• left：内容左对齐。
• center：内容居中对齐。
• right：内容右对齐。
• justify：内容两端对齐。
• start：内容对齐开始边界。（CSS3）
• end：内容对齐结束边界。（CSS3）
• <string>：字符串必须是单一字符，否则申明将无效。（CSS3）
• match-parent：这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的，计算值可以是 left 和 right 。（CSS3）
• start end：指定 start 对齐第一行和任何强制打断的行；end 对齐所有剩余的行不受 text-align-last 影响。（CSS3）

text-align-last

设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式

• 如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行，除非显示的指定 text-align 第一行对齐方式（值 ‘start end‘），否则 text-align-last 将会覆盖 text-align；
• 如果 auto 值被指定，内容的对齐方式将依据 text-align 的设定，除非 text-align 设置为justify；
• 作为IE的私有属性之一，IE5.5率先实现了 text-align-last ，后期被w3c采纳成标准属性；
• IE7及以下浏览器只实现了块内最后一行的对齐方式，没有处理被强制打断的行的对齐方式，从IE8开始，这两种形式的行对齐都被支持；
• IE浏览器下，如果 text-align-last 要生效，必须先定义 text-align 为justify；

属性值

• auto：无特殊对齐方式。
• left：内容左对齐。
• center：内容居中对齐。
• right：内容右对齐。
• justify：内容两端对齐。
• start：内容对齐开始边界。
• end：内容对齐结束边界。

text-justify

设置或检索对象内调整文本使用的对齐方式。

• 因为这个属性影响文本布局，所以 text-align 属性必须被设置为 justify 。

属性值

• auto：允许浏览器用户代理确定使用的两端对齐法则。
• none：禁止两端对齐。
• inter-word：通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法，它的两端对齐行为对段落的最后一行无效。
• inter-ideograph：为表意字文本提供完全两端对齐，增加或减少表意字和词间的空格。
• inter-cluster：调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的
• distribute：通过增加或减少字或字母之间的空格对齐文本，适用于东亚文档，尤其是泰国。
• kashida：通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持

word-spacing

检索或设置对象中的单词之间的最小，最大和最佳间隙。

• 该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外。
• 判断是否为单词的依据是单词间是否有空格。

属性值

• normal：默认间隔
• <length>：用长度值指定间隔。可以为负值。
• <percentage>：用百分比指定间隔。可以为负值。（CSS3）

letter-spacing

检索或设置对象中的字符之间的最小，最大和最佳间隙。

• 该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后；
• letter-spacing不能被应用于一行的开始和结束；

属性值

• normal：默认间隔
• <length>：用长度值指定间隔。可以为负值。
• <percentage>：用百分比指定间隔。可以为负值。（CSS3）

text-indent

检索或设置对象中的文本的缩进。

• 内联对象要使用该属性必须先使该对象表现为块级或内联块级。
• hanging和each-line关键字紧随在缩进数值之后

示例代码：

divtext-indent:2em each-line;

以上代码将使得div内部的第一行及每个强制换行的首行都拥有2em的缩进

属性值

• <length>：用长度值指定文本的缩进。可以为负值。
• <percentage>：用百分比指定文本的缩进。可以为负值。
• each-line：定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）
• hanging：反向所有被缩进作用的行。（CSS3）

vertical-align

设置或检索内联元素在行框内的垂直对其方式。

属性值

• baseline：将支持valign特性的对象的内容与基线对齐
• sub：垂直对齐文本的下标
• super：垂直对齐文本的上标
• top：将支持valign特性的对象的内容与对象顶端对齐
• text-top：将支持valign特性的对象的文本与对象顶端对齐
• middle：将支持valign特性的对象的内容与对象中部对齐
• bottom：将支持valign特性的对象的文本与对象底端对齐
• text-bottom：将支持valign特性的对象的文本与对象顶端对齐
• <percentage>：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
• <length>：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

line-height

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

属性值

• normal：允许内容顶开或溢出指定的容器边界。
• <length>：用长度值指定行高。不允许负值。
• <percentage>：用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。
• <number>：用乘积因子指定行高。不允许负值。