CSS中的文本属性
本文总结一下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中的文本属性的更多相关文章
- css中一些文本属性的用法
代码 /* text-transform用法 */ .p1 { /* 默认值 */ text-transform: none; } .p2 { /* 每个单词的首字母大写 */ text-transf ...
- CSS中使用文本阴影与元素阴影
文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
随机推荐
- js ajax上传图片到服务器
$("#up_goods_pic").on('change',function(){ var file = this.files[0]; var url = webkitURL.c ...
- Angular JS 使用的注意事项
标签中ng-app,什么情况需要指定名称,什么时候又不需要呢? 1.ng-app="" <div ng-app="" ng-controller='myC ...
- C#MD5为密码加密
byte[] date = Encoding.Unicode.GetBytes(txtPassword.Text.ToCharArray()); MD5CryptoServiceProvider md ...
- SIP入门(二):建立SIPserver
在我的上一篇文章中已经介绍怎样通过SIP软电话直接通话,可是假设须要支持很多其它用户互相通话,同一时候基于安全考虑,须要对用户帐户登录进行验证控制,这些情况下就须要建立SIPserver. SIPse ...
- 设计模式 ( 十八 ) 策略模式Strategy(对象行为型)
设计模式 ( 十八 ) 策略模式Strategy(对象行为型) 1.概述 在软件开发中也经常遇到类似的情况,实现某一个功能有多种算法或者策略,我们能够依据环境或者条件的不同选择不同的算法或者策略来完毕 ...
- MySQL auto_increment实现
http://www.cnblogs.com/xpchild/p/3825309.html 运维的时候,经常遇到auto_increment的疑惑: 机器异常crash,重启后id回退的问题 性能考虑 ...
- Linux高级字符设备驱动
转载:http://www.linuxidc.com/Linux/2012-05/60469p4.htm 1.什么是Poll方法,功能是什么? 2.Select系统调用(功能) Select ...
- Quartz 设置一个半小时任务实现
该文章属于本人原创,转载请注明出处. spring + Quartz 设置定时任务时要求没一个半小时执行一次 设置两个相同的定时任务 第一个从整点开始每三小时执行一次 ...
- LeetCode28 Implement strStr()
题目: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ne ...
- 1.4 Documents,Fields和Schema设计--目录
1.4.1.Documents,Fields和Schema概述 1.4.2 solr字段类型 1.4.2 solr字段类型--(1.4.2.1)字段类型定义和字段类型属性 1.4.2 solr字段类型 ...