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 下面, ...
随机推荐
- linxu php连接sqlserver
今天linux的yum也不能用,用的是第三方的yum源,yum安装好后更新header又花了很长时间. 记得安装指定安装目录要用 --with-php-config=PATH命令. CentOS 6安 ...
- udt nat traverse
https://github.com/bakwc/udt-nat-traverse Example of nat traversal using udt library. UDT is a udp b ...
- Codeforces Round #306 (Div. 2) D. Regular Bridge 构造
D. Regular Bridge Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/550/pro ...
- 【JavaScript】关于prototype
所有的对象都有constructor属性 但是只有function类型才有prototype属性----->值是一个对象,即prototype对象,所有的实例对象共享同一个prototype对象 ...
- 【JavaScript】你知道吗?Web的26项基本概念和技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks
In this tutorial we are going to learn how we can accidentally creating memory leaks in our applicat ...
- 利用shell脚本统计文件中出现次数最多的IP
比如有如下文件test.txt 1 134.102.173.43 2 134.102.173.43 3 134.102.171.42 4 134.102.170.9 要统计出现次数最多的IP可 ...
- C++基础之预处理命令
目录 概述——对预处理命令的理解 预处理命令的处理时间 C++中主要的预处理命令 宏定义 “文件包含”处理 选择编译 概述 使用C++的预处理命令可以提高程序的可维护性,有利于程序员以更加方便和快捷的 ...
- centos 6.3 搭建git/gitosis/gitweb
1. git的安装和配置 (1)使用yum源安装git yum install git (2)创建git用户并设置密码 #useradd --home /home/git git #passwd gi ...
- java中十进制转二进制转换函数
十进制转成十六进制: Integer.toHexString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成二进制 Integer.toBinar ...