初步学习css 从css手册看起———text

　　今天该学习text属性~\(≧▽≦)/~啦啦啦 。学习的动力！

text(文本属性)：

text基本的语法： text-indent:是对文本缩进（就是对文本的一段开头空格而已）可以用负值，不过文字就往左边移动了
　　　　　　　　　text-overflow：是截取文本溢出。有clip不显示...号，ellipsis文本超出长宽度都显示...号。
　　　　　　　　　vertical-align:使内容垂直对齐。
　　　　　　　　　text-alin:文本在左边，中间还是右边 。
　　　　　　　　　layout-flow:设置文本的流动方向，是从左边流入，还是自上而下流入。不过，不建议使用这个属性，建议使用writing-mode属性
　　　　　　　　　writing-mode:lr-tb(左右上下).tb-rl(上下右左)。
　　　　　　　　　direction:ltr(从左到右),rtl(从右到左)。
　　　　　　　　　unicode-bidi:对文本进行不同的书写方向。
　　　　　　　　　word-break:设置字体换行时可以断开不。
　　　　　　　　　white-space:对文本内的空格进行处理。
　　　　　　　　　word-wrap:normal允许内容撑开边界，break-word:会强制换行。
　　　　　　　　　text-autospace:设置或检索对象文本的自动空格和紧缩空格宽度调整的方式。
　　　　　　　　　text-kashida-space：如何拉伸字符来调节文本行排列。它可以和text-justify属性一起使用。
　　　　　　　　　text-justify：设置文本的对齐方式。
　　　　　　　　　ruby-align:rt对象指定的注释文本或发音指南的对齐位置。
　　　　　　　　　ruby-overhang：rt对象指定的注释文本或发音指南的对齐位置。
　　　　　　　　　ruby-position：rt对象指定的注释文本或发音指南的对齐位置。
　　　　　　　　　ime-mode：是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
　　　　　　　　　layout-grid：设置或检索复合文档中指定文本字符版式的网格特性。
　　　　　　　　　layout-grid复合属性。设置或检索复合文档中指定文本字符版式的网格特性
　　　　　　　　　layout-grid-char：设置或检索应用于对象文本的字符网格值
　　　　　　　　　layout-grid-char-spacing：设置或检索字符间隔
　　　　　　　　　layout-grid-line：设置或检索应用于对象文本的行网格值
　　　　　　　　　layout-grid-mode：设置或检索文本网格版式是否使用二维
　　　　　　　　　grid-type：设置或检索应用于对象文本的网格类型

<!---------------------------------------------------在学习中遇到的问题-------------------------------------------------------->

　　text-overflow:在DW里面写text-overflow时，里面没有提示...有text-align，text-decoration就是没有text-overflow。我就纳闷了，怎么会没有也？！原来弄了半天那是DW内置没有text-overflow，但是在浏览器中还是可以运行显示。白呀！

　　还有很纠结的问题 ，在写text-overflow：ellipsis时，.text_ellipsis{text-overflow:ellipsis;overflow:hidden;height:10px;width:100px;}运行时

的效果，IE Opera显示后面根本没有...号，firefox里面却有！奇特~。

　　结果捏~是要实现溢出时产生省略号的效果要写这两种定义：white-space:nowrap（强制文本不换行在一行内显示）,overflow:hidden
（溢出时内容为隐藏）。：-o-text-overflow: ellipsis;opera里面才能显示

　　.text_ellipsis{text-overflow:ellipsis; /*ie浏览*/ -o-text-overflow: ellipsis; /*opera浏览*/ overflow:hidden; /*溢出的内容为隐藏*/white-space:nowrap; /*强制文本不换行*/ height:10px;width:100px;}


　　vertical-align：

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

这么多的属性呀！

　　baseline：顾名思义~基线。这个也是vertical-align的默认属性，即使你不设置vertical-align图片和文字还是会以基线为准的。看以张图吧

，千万别以为基线就是文字的最下端和图片的最下端对齐。虽然开始我也这么认为来着。

　　sub:

　　super:

　　

　　text-top:

　　text-bottom:


　　middle:


　　top和bottom：和text-top和text-bottom类似。

　　writing-mode:在IE里面文字可以显示竖排的效果，但是在火狐里面却不能显示。看到说用模拟文字竖排来显示不用writing-mode，但是这样感觉代码太累赘了。希望有更好的方法来解决！

　　direction:它的效果跟text-align:left/right 的效果差不多，不同的是 direction属性，ltr(左到右) rtl（右到左）...！ 的效果
　　　　　　　　　　direction:ltr;


　　　　　　　　　　direction:rtl;


　　　　　　　　　text-align:left;


　　　　　　　　　text-align:right;


　　　　　　可以从以上看出效果来，direction文本从右往左时，符号却在文字的前面，这显然...有点...

　　word-beak:
　　　　　　　　break-all:

允许文本的任意字断开。

　　　　　　　　 keep-all:

不允许文本任意字的断开。

　　　white-space:

normal:用默认的处理方式处理，空白符会被合并，换行符被忽略掉，而且不允许自动换行。



pre:空白符和换行符不保留下来，不允许自动换行，则可能会超过边界溢出。



nowrap:在一行显示，空白符会被合并，如果有换行符就强制换行，不允许自动换行。



pre-wrap: 会保留空白符。有换行符的话会自动换行。而且允许自动换行。



pre-line:空白符会自动合并，有换行符的会自动换行，允许自动换行。



ps:(text属性现在才看完，这速度~时间是挤挤挤出来的！不过会加油的！！)