如何使用css(4)-文本属性

《如何使用css(4)-文本属性》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

如何使用CSS(4)-文本属性文本属性(TextProperties)text-indenttext-overflowvertical-aligntext-alignlayout-flowwriting-modedirectionunicode-bidiword-breakline-breakwhite-spaceword-wraptext-autospacetext-kashida-spacetext-justifyruby-alignruby-positionruby-overhangime-modelayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-type text-indent说明：检索或设置对象中的文本的缩进。默认值为0。在被另一个对象(如br)断开的对象内不能应用本属性。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textIndent。语法：text-indent:length取值：length:　百分比数字|由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位示例：DIV{text-indent:2cm}.click1{text-indent:50%}.click2{text-indent:}text-overflow说明：设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。这个属性仅仅作用于水平内联方向的，普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。要强制溢出发生并且应用ellipsis值，作者必须设置对象的white-space属性值为nowrap。假如没有换行机会(例如，对象容器的宽度是狭窄的，而内有很长的没有合理断行的文本)，没有应用nowrap也有可能溢出。为了使ellipsis值被应用，此属性必须被设置到具有不可视区域的对象。最好的选择是设置overflow属性为hidden。设置overflow属性为scroll或者auto时，此属性也会应用。但是会有滚动条出现。 通过选择省略标记，隐藏的文本可以被选择。当选择发生时，省略标记会隐藏而被文本替换。此属性为在DHTML中制作省略标记提供了高效的方法。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textOverflow。语法：text-overflow:clip|ellipsis取值：clip:　默认值。不显示省略标记(...)，而是简单的裁切ellipsis:　当对象内文本溢出时显示省略标记(...)示例：div{overflow:hidden;text-overflow:ellipsis;}vertical-align说明：设置或检索对象内容的垂直对其方式。对于currentStyle对象而言此属性的默认值为auto。对于其他对象而言是baseline。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为verticalAlign。语法：vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length取值：auto:　CSS1根据layout-flow属性的值对齐对象内容baseline:　CSS1默认值。将支持valign特性的对象的内容与基线对齐sub:　CSS1垂直对齐文本的下标 super:　CSS1垂直对齐文本的上标top:　CSS1将支持valign特性的对象的内容对象顶端对齐text-top:　CSS1将支持valign特性的对象的文本与对象顶端对齐middle:　CSS1将支持valign特性的对象的内容与对象中部对齐bottom:　CSS1将支持valign特性的对象的内容与对象底端对齐text-bottom:　CSS1将支持valign特性的对象的文本与对象顶端对齐length:　CSS2由浮点数字和单位标识符组成的长度值|百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。请参阅长度单位。目前IE尚未实现此参数示例：td{vertical-align:middle;}text-align说明：设置或检索对象中文本的对齐方式。此属性作用于所有块对象(blockelements)。在一个div对象里的所有块对象的会继承此属性值。假如属性没有设置，这个参数将获取null值。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textAlign。语法：text-align:left|right|center|justify取值：left:　默认值。左对齐right:　右对齐 center:　居中对齐justify:　两端对齐示例：div{text-align:center;}layout-flow说明：设置或检索对象内文本的流动和方向。当此属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。这是一个不建议使用的属性。建议使用writing-mode属性替代它。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为layoutFlow。语法：layout-flow:horizontal|vertical-ideographic取值：horizontal:　默认值。对象中的内容自左边流入。下一行在前一行下面。这个值适用于拉丁语系vertical-ideographic:　对象中的内容自上而下流入，下一行在前一行左面。这个值适用于亚洲语系示例：div{layout-flow:horizontal;}writing-mode说明：设置或检索对象的内容块固有的书写方向。西方语言确省的是左-右，上-下的书写方式。但是亚洲语言常有上-下，右-左的书写方式。当此属性值发生变化时，text-align属性与vertical-align 属性的作用也将发生变化。对于下列元素来说，样式表属性不可继承：BUTTONCAPTIONINPUTINPUTtype=buttonINPUTtype=fileINPUTtype=passwordINPUTtype=resetINPUTtype=submitINPUTtype=textISINDEXOPTIONTEXTAREA此属性效果不会被累积作用。例如，假如父对象的此属性值设为tb-rl，子对象的此属性值设为tb-rl不会导致子对象的旋转。假如对象的writing-mode属性设置和它的父对象不一样则其将获得自己的布局。那样一个对象的宽度是通过使用它第一个有布局的父对象的高度而确定的。当你使用具有不同writing-mode属性值的对象时，给每一个对象指定确定的尺寸能够让你更好的整体控制它们的布局。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为writingMode。语法：writing-mode:lr-tb|tb-rl取值：lr-tb:　默认值。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。所有的字形都是竖直向上的。这种布局是罗马语系使用的tb-rl:　上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的示例：div{writing-mode:tb-rl;}direction 说明：用于设置文本流入的方向。请参阅对象的dir属性。此属性不会影响拉丁文的字母数字字符，它们总是以ltr值被呈递。但是此属性会作用于拉丁文的标点符号。假如您想应用此属性于内联文本，您必须设定unicode-bidi属性为embed或bidi-override。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为direction。语法：direction:ltr|rtl|inherit取值：ltr:　默认值。文本从左到右流入rtl:　文本从右到左流入inherit:　文本流入方向由继承获得示例：div{direction:rtl;unicode-bidi:bidi-override;}unicode-bidi说明：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用。假如您想应用direction属性于内联文本，您必须设定此属性值为embed或bidi-override。Unicode双向运算法则自动翻转嵌入字符顺序依照它们固有的流动方向。例如，英文文档的默认书写方向是左-右，假如其中包含的部分其他语种的字符其书写方向是右-左，双向运算法则就可以用来代理用户正确的反转其流动方向。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为unicodeBidi。语法：unicode-bidi:normal|bidi-override|embed取值：normal:　默认值。对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作bidi-override:　严格按照direction属性的值重排序。忽略隐式双向运算规则embed:　对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序示例：div{direction:rtl;unicode-bidi:bidi-override;}word-break说明：设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文，应该使用break-all。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为wordBreak。语法：word-break:normal|break-all|keep-all取值：normal:　默认值。允许在词间换行break-all:　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本keep-all:　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本示例： div{word-break:break-all;}line-break说明：设置或检索用于日文文本的换行规则。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为lineBreak。语法：line-break:normal|strict取值：normal:　默认值。应用日文文本的默认换行规则strict:　强制日文文本换行规则的严谨性示例：div{line-break:strict;}white-space说明：设置或检索对象内空格字符的处理方式。空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为normal或者nowrap时，你可以使用不换行空格的命名实体 来添加空格，用br元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。此属性作用于块对象。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为whiteSpace。语法：white-space:normal|pre|nowrap 取值：normal:　默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行pre:　换行和其他空白字符都将受到保护。这个值需要IE6+或者!DOCTYPE声明为standards-compliantmode支持。如果!DOCTYPE声明没有指定为standards-compliantmode，此属性可以使用，但是不会发生作用。结果等同于normal。参阅pre对象nowrap:　强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅noWrap属性示例：p{white-space:nowrap;}word-wrap说明：设置或检索当当前行超过指定容器的边界时是否断开转行。此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为wordWrap。语法：word-wrap:normal|break-word取值：normal:　默认值。允许内容顶开指定的容器边界break-word:　内容将在边界内换行。如果需要，词内换行(word-break)也将发生示例：div{word-wrap:break-word;word-break:break-all;} text-autospace说明：设置或检索对象文本的自动空格和紧缩空格宽度调整的方式。表意字是东亚编写系统中的字符，表示一个概念或方法，但不是一个特定的字或词。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textAutospace。语法：text-autospace:none|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space取值：none:　默认值。无调整发生ideograph-alpha:　在表意字和非表意字(如Latin-based，Greek，Cyrillic，Arabic，Hebrew文本)之间创建额外空格ideograph-numeric:　在表意字和数字字符之间创建额外空格ideograph-parenthesis:　在常规(非等宽)插入语和表意字之间创建额外空格ideograph-space:　当空格相邻表意字符时，扩展空格的宽度示例：div{text-autospace:ideograph-alpha;}text-kashida-space说明：设置或检索如何拉伸字符来调节文本行排列。默认值为0%。Kashida是一种印刷效果，通过在恰当的位置拉长字符来调整文本行。它通常用于阿拉伯书写系统。此属性可以在任何应用Kashida样式的场合使用。例如text-justify属性值为auto，distribute，kashida， newspaper时。此属性仅作用于块对象。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textKashidaSpace。语法：text-kashida-space:length|inherit取值：length:　百分数。标示kashida膨胀与空格膨胀的比例。为100%，仅有kashida膨胀。为0%，仅有空格膨胀inherit:　遵循父对象的设置示例：div{text-kashida-space:50%;text-justify:kashida;}text-justify说明：设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局，所以text-align属性必须被设置为justify。此属性只作用于块对象。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify。语法：text-justify:auto|distribute|distribute-all-lines|distribute-center-last|inter-cluster|inter-ideograph|inter-word|kashida|newspaper取值：auto:　默认值。允许浏览器代理用户确定使用的两端对齐法则distribute:　处理空格很像newspaper ，适用于东亚文档。尤其是泰文distribute-all-lines:　两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档distribute-center-last:　未实现inter-cluster:　调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的inter-ideograph:　为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格inter-word:　通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效kashida:　通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持newspaper:　通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式示例：div{text-justify:auto;text-align:justify;}ruby-align说明：设置或检索通过rt对象指定的注释文本或发音指南(参考ruby对象)的对齐位置。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为rubyAlign。语法：ruby-align:auto|left|center|right|distribute-letter|distribute-space|line-edge取值：auto:　默认值。由浏览器确定对齐方式。对于ideographic(东亚)文本以distribute-space值对齐。对于Latin文本以center值对齐 left:　根据基本宽度左对齐center:　根据基本宽度居中对齐。如果基本宽度小于ruby文本的宽度，那么基本宽度在ruby文本的宽度中居中right:　根据基本宽度右对齐distribute-letter:　如果ruby文本的宽度小于基本宽度，则ruby文本在基本宽度中均匀分布。如果ruby文本的宽度大于或等于基本宽度，居中对齐distribute-space:　如果ruby文本的宽度小于基本宽度，则ruby文本在基本宽度中均匀分布。在ruby文本中，在第一个字符的前面后最后字符的后面有半个字距的空白区域。如果ruby文本的宽度大于或等于基本宽度，居中对齐line-edge:　如果ruby文本不相邻行边缘，则其被居中。否则ruby文本行在基本文本边的上方示例：ruby{ruby-align:right;}ruby-position说明：设置或检索通过rt对象指定的注释文本或发音指南(参考ruby对象)的位置。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为rubyPosition。语法：ruby-position:above|inline取值：above:　默认值。在基本文本上方定位ruby文本inline:　ruby文本与基本文本内联示例： ruby{ruby-position:above;}ruby-overhang说明：设置或检索通过rt对象指定的注释文本或发音指南(参考ruby对象)的位置。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为rubyOverhang。语法：ruby-overhang:auto|whitespace|none取值：auto:　默认值。ruby文本突出相邻基本文本的任何其他文本whitespace:　ruby文本只突出空白区域的字符none:　ruby文本只突出相邻基本文本的任何其他文本示例：ruby{ruby-overhang:auto;}ime-mode说明：设置或检索是否允许用户激活输入中文，韩文，日文等的输入法(IME)状态。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为imeMode。语法：ime-mode:auto|active|inactive|disabled取值：auto:　默认值。不影响IME的状态。与不指定ime-mode属性时相同 active:　指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IMEinactive:　指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IMEdisabled:　完全禁用IME。对于有焦点的控件(如输入框)，用户不可以激活IME示例：input{ime-mode:auto;}layout-grid说明：设置或检索复合文档中指定文本字符版式的网格特性。以东亚语言(如中文，日文)编写的文档通常根据一维或二维网格使用字符的页面版式。对应的脚本特性为layoutGrid。语法：layout-grid:layout-grid-mode||layout-grid-type||layout-grid-line||layout-grid-char取值：该属性是复合属性。请参阅各参数对应的属性。默认值为：bothloosenonenone。示例：div{layout-grid:bothloosenonenone;}layout-grid-char说明：设置或检索应用于对象内容文本的字符网格尺寸。其视觉效果类似于line-height属性。 以东亚语言(如中文，日文)写的文档通常根据一维或二维网格使用字符的页面版式。你可以用layout-grid属性将这种布局加入到网页文档中去。此属性只应用于块对象(如div)。要使此属性发生作用，layout-grid-mode属性值必须设置为line或both。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为layoutGridChar。语法：layout-grid-char:none|auto|length取值：none:　默认值。无字符网格设定auto:　在对象文本中按最大的字符确定网格length:　百分数|由浮点数字和单位标识符组成的长度值，其百分比取值是基于父对象尺寸。请参阅长度单位示例：div{layout-grid-char:auto;}layout-grid-char-spacing说明：设置或检索如何拉伸字符来调节文本行排列。默认值为0%。Kashida是一种印刷效果，通过在恰当的位置拉长字符来调整文本行。它通常用于阿拉伯书写系统。此属性可以在任何应用Kashida样式的场合使用。例如text-justify属性值为auto，distribute，kashida，newspaper时。此属性仅作用于块对象。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textKashidaSpace。 语法：text-kashida-space:length|inherit取值：length:　百分数。标示kashida膨胀与空格膨胀的比例。为100%，仅有kashida膨胀。为0%，仅有空格膨胀inherit:　遵循父对象的设置示例：div{text-kashida-space:50%;text-justify:kashida;}layout-grid-line说明：设置或检索应用于对象文本的行网格尺寸。其视觉效果类似于line-height属性。以东亚语言(如中文，日文)写的文档通常根据一维或二维网格使用字符的页面版式。你可以用layout-grid属性将这种布局加入到网页文档中去。此属性只应用于块对象(如div)。要使此属性发生作用，layout-grid-mode属性值必须设置为line或both。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为layoutGridLine。语法：layout-grid-line:none|auto|length取值：none:　默认值。无字符网格设定auto:　在对象文本中按最大的字符确定网格length:　百分数|由浮点数字和单位标识符组成的长度值，其百分比取值是基于父对象尺寸。请参阅长度单位 示例：div{layout-grid-line:auto;}layout-grid-mode说明：设置或检索文本网格版式是否使用二维。以东亚语言（如中文，日文）编写的文档通常根据一维或二维网格使用字符的页面版式。你可以用layout-grid属性将这种布局加入到网页文档中去。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为layoutGridMode。语法：layout-grid-mode:both|line|char|none取值：both:　默认值。指定char和line都被启用。要在一个对象上完全启用网格版式，此值是必须的line:　指定只使用行网格。建议与内联对象(如span)一起使用char:　指定只使用字符网格。建议和块对象(如div)一起使用none:　不使用网格示例：div{layout-grid-mode:char;}layout-grid-type说明：设置或检索应用于对象文本的网格类型。其视觉效果类似于line-height属性。以东亚语言(如中文，日文)写的文档通常根据一维或二维网格使用字符的页面版式。你可以用layout-grid 属性将这种布局加入到网页文档中去。此属性只应用于块对象(如div)。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为layoutGridType。语法：layout-grid-type:loose|strict|fixed取值：loose:　默认值。指定在中文或韩文中使用网格的文本，只有象形文字，假名，宽字符域网格对齐。其余的和通常一样，尽管包含这些字符的文本范围的layout-grid-mode被设置为none或line。该模式还禁用通常用于对象文本的特殊文本对齐和字符宽度调整。最后，如果不能再换行边界的文本中找到一个换行机会，那么文本将被推至下一行，并且上一行的最后留出空白strict:　指定在日文中使用网格。规则为：如果没有其他的宽度调整效果，则增加宽字符以获取精确的网格填充。窄字符(除了草书字体)按照应用于宽字符的一半增量增加fixed:　指定使用于等宽版式网格。规则为：所有非草书符号视为等宽。默认情况下，每个字符在单一网格中居中。禁止对齐或任何其他改变字符宽度的行为示例：div{layout-grid-type:strict;}