1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

CSS中的文本属性

作者:用户 来源:互联网 时间:2016-07-15 11:28:47

字体css容器属性文本文本属性word-wrap长代码无法换行td内容不换行

CSS中的文本属性 - 摘要: 本文讲的是CSS中的文本属性, 本文总结一下CSS中关于文字的相关属性,最后给出实例。 CSS基础文字属性 文字的基础属性主要包括:字体、颜色和文本。除去颜色color的属性外,字体和文

本文总结一下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则会直接进行切割。
    代码示例
    CSS中的文本属性-<a href=css文本属性">CSS中的文本属性-css文本属性有哪些CSS中的文本属性-css的文本属性CSS中的文本属性-css文本框属性
    另外,属性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 , 容器 , 属性 , 文本 , 文本属性 , word-wrap , 长代码无法换行 td内容不换行 css文本属性、css文本属性有哪些、css的文本属性、css文本框属性、css中文本垂直居中,以便于您获取更多的相关知识。

javascript-css属性中的px和em区别

问题描述 css属性中的px和em区别 css属性中的px和em的区别是什么?百度说的好专业。。看不懂。。麻烦大神们给通俗易懂的解释一下。。 解决方案 CSS中em和px的区别...

纯CSS文本阴影效果实现

CSS2中的text-shadow属性能够很容易的给web页面中的文本添加阴影,但是到目前为止只有OS X的Safari浏览器支持它,今天,我们将为其他浏览器创建CSS文本阴影效果,包括Firefox。 讨论了多年的text-shadow属性可以让你控制页面元素阴...

PHP求职宝典系列——PHP Web 编程篇

...upload_max_filesize 选项设置的值。   3.如何设置form表单中的只读属性。 利用 readonly 设置指定内容的只读属性; 利用 disabled 实现设置指定内容的只读属性。   4.在什么情况下,$name 与 $_POST['name']可以通用。   在 php.ini 文...

用html5构建兼容iE6的网页

HTML5中的新元素自从HTML4.01 1999年发布后,互联网经过了翻天覆地的变化。 今天,很多的HTML4.01都不再使用,或者几乎不再使用,或者不在像原来设计的方式使用。针对这些问题,HTMl5中我们删除并且重新设计了很多元素。 为了更...

CSS字体和文本

...字体变化 font:字体简写 字体簇font-family 用于设定元素中的文本使用什么字体,具体用法参考font-family,其常见应用和问题如下: 字体来源 用户机器中安装的字体; 保存在第三方网站上的字体,如:Typeket和Google Fonts 保存在...

前三篇
后三篇