注册 | 登陆
您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

CSS中的文本属性

  稿源:互联网   2015-07-15 12:18:18   点击:   撤稿纠错

以下讨论的是和相关的CSS中的文本属性 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

本文总结一下CSS中关于文字的相关属性,最后给出实例。

CSS基础文字属性

文字的基础属性主要包括:字体、颜色和文本。除去颜色color的属性外,字体和文本的相关属性可以权威参考:
CSS 文本属性(Text)
CSS 字体属性(Font)

CSS3新增属性

  • 文本阴影text-shadow
  • 文本溢出text-overflow
    这个属性一般需要配合overflow:hiddenwhite-spance:nowrap(强制文本容器不换行)使用。
  • 文本换行word-wrap word-break
    这里有两个设置有点类似,都是对长单词或网址、数字之类的字符串在到达右边界时进行断行。区别是:word-wrap:break-word会首先尝试将长字符串移入下一行,如果仍然显示不下,就切断分割;而word-break:break-all则会直接进行切割。
    代码示例
    默认默认word-wrapword-break
    另外,属性white-space也对文本换行有影响,当其为nowrap时会强制不换行。

实际应用

利用文本溢出的text-overflow属性,可以对列表的文本展示进行设置,
即充分利用空间又保证样式美观,详见代码示例

文本设置tips

单元格td自动换行:

table {
    table-layout:fixed; //列宽由表格宽度和列宽度设定。
    width:**px;
}
table td{
    overflow:hidden;
    word-wrap:break-word;
}

文本的垂直居中vertical-align:
这个问题也许大家经常碰到,我就不详说具体解决方案了,可以参考这两篇文章我对CSS vertical-align的一些理解与认识未知高度多行文本垂直居中。只说一下要点,vertical-align设置时一定要有参照点,而且vertical-align只在inline-block的容器内有效,块级元素容器设置vertical-align是不起作用的。


关于CSS中的文本属性的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/ a/2015071595101.shtml方便下次再访问哦。