本文总结一下CSS中关于文字的相关属性,最后给出实例。
CSS基础文字属性
文字的基础属性主要包括:字体、颜色和文本。除去颜色color的属性外,字体和文本的相关属性可以权威参考:
CSS 文本属性(Text)
CSS 字体属性(Font)
CSS3新增属性
- 文本阴影:text-shadow
- 文本溢出:text-overflow
这个属性一般需要配合overflow:hidden
和white-spance:nowrap(强制文本容器不换行)
使用。 - 文本换行:word-wrap
word-break
这里有两个设置有点类似,都是对长单词或网址、数字之类的字符串在到达右边界时进行断行。区别是:word-wrap:break-word
会首先尝试将长字符串移入下一行,如果仍然显示不下,就切断分割;而word-break:break-all
则会直接进行切割。
代码示例
另外,属性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中文本垂直居中,以便于您获取更多的相关知识。