从零学CSS系列之文本属性

1.line-height

可以给某个元素指定一个不带单位的缩放因子，这样它的后代元素就会继承这个缩放因子，再根据自身的字号大小来计算自己的行高(line-height)值，

代码如下:

body {
  font-size: 12px;
  line-height: 1.5;
}

h1 {
  font-size: 36px;
}

这里，body 的 line-height 是 18px（12 * 1.5），而 h1 的 line-height 则是 54px（36 * 1.5）。

就算使用 em，百分比等相对单位，后代元素继承的仍然是计算后的行高(line-height)值，比如把上面的 body 行高改成 1.5em，那么 h1 的行高就会继承这个值 18px。

2.text-decoration

文本修饰是非继承类属性，给 body 元素设置为 none，并不会影响到后代中默认有文本修饰的元素，例如超链接，所以如果要去掉超链接的默认下划线还是需要单独进行设置，

代码如下:

a {
  text-decoration: none;
}

虽然该属性默认不继承，但是祖先元素上设置的修饰会“延伸”到后代元素中，

代码如下:

<p>我有下划线 <span>我咋会有下划线呢?</span></p>

代码如下:

p {
  color: red;
  text-decoration: underline;
}

p span {
  color: green;
  text-decoration: none;
}

这里的下划线是 p 元素的。

代码如下:

p {
  color: red;
  text-decoration: underline;
}

p span {
  color: green;
  text-decoration: underline;
}

由于文本修饰属性的延伸会造成一些兼容性的问题，所以

最好的做法就是给需要修饰的文本单独设置 text-decoration 属性。

3.text-indent

可以使用该属性给每个段落首行缩进2个字符，而不是使用空格，

代码如下:

p {
  text-indent: 2em;
}

也可以指定一个负数的值，产生首行悬挂的效果，

让引号悬挂也是一种常用做法，

让文本缩进到一个足够远的地方，可以让文字消失，

代码如下:

text-indent: -9999px;

因此，通常的图像替换文字常用方法，

代码如下:

.logo {
  background: url(logo.png) no-repeat;
  display: inline-block;
  height: 36px;
  text-indent: -9999px;
  width: 72px;
}

IE6/7 并不真正支持 inline-block，某些情况下可能会导致 .logo 消失不见，可以使用浮动或者 block 替代 inline-block，不过两者都会改变布局方式，也可以使用其它方法。

4.text-overflow

通常情况下，长串的URL地址，在超出容器时会溢出，我们可以设定当文本溢出包含容器时显示省略符号，

代码如下:

li {
  overflow: hidden;
  text-overflow: ellipsis;
}

必须配合 overflow: hidden; 一起使用；有时候可能还得加上一个宽度，比如IE 6，

对于那些默认情况下并不会溢出的文本，需要强制其在一行内显示，这样才能产生效果，

代码如下:

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* for IE 6 */
}

使用 white-space: pre; 或者 word-break: keep-all; 也能强制文本在一行显示，不过各有各的问题。

在 IE 8/9 中，有时候会发现没有效果，那有可能是祖先元素中某个元素设置了word-wrap: break-word; 而该属性会表现得比 white-space: nowrap; 更强势，所以，有时候还得加上下面代码，

代码如下:

word-wrap: normal;

5.text-shadow

在非白色背景的深色文字上，可以实现漂亮的内嵌效果，

代码如下:

text-shadow: 0 1px 0 rgba(255,255,255,.75);

可以给文本添加多个阴影，用逗号分隔，

代码如下:

text-shadow: 0 1px 0 #fff, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd;

6.white-space

white-space 属性设置如何处理元素内的空白。

设置值为 nowrap 让文本可以在同一行上继续，遇到边界也不会换行，直到遇到 <br> 标签，

代码如下:

white-space: nowrap;

有时我们希望保留文本中的空格和换行符之类的，比如展示计算机的源代码的时候，就会用到 <pre>，而 <pre> 的 white-space 属性的值就是 pre，

代码如下:

pre {
  white-space: pre;
}

pre 也不那么尽如人意，遇到边界的时候不会自动换行，所以 CSS 2.1 新增了 pre-wrap，

代码如下:

pre {
  white-space: pre;
  white-space: pre-wrap;
}

这样 pre 元素里的内容既能保持原有的格式，又能在内容超出边界的时候自动换行。

由于不是所有浏览器都支持 pre-wrap，所以还需要让那些不支持浏览器强制换行，

代码如下:

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

当然，也许你并不希望换行，也不介意水平滚动条，那可以用水平滚动条来代替换行，

代码如下:

pre {
  overflow: auto;
}

7.word-break

目前 webkit 大家族（包括 Google Chrome，Safari，Android Browser 等等）均不支持 keep-all 值，所以能用的也就 break-all 了，

代码如下:

word-break: break-all;

不过会造成英文文本阅读障碍，应该慎用，

8.word-wrap

这是比 word-break 更好的实现文本换行的方式，

代码如下:

word-wrap: break-word;

再添加一个溢出隐藏，避免一些恶意的连续字符，

代码如下:

overflow: hidden;

赞 (0)

相关推荐

  • word-wrap

    word-wrap : normal | break-word 参数: normal : 允许内容顶开指定的容器边界break-word : 内容将在边界内换行.如果需要,词内换行(word-break)也行发生 说明: 设置或检索当当前行超过指定容器的边界时是否断开转行.对应的脚本特性为wordWrap.请参阅我编写的其他书目. 示例: div { word-wrap: break-word; } word-break : normal | break-all | keep-all 参数: n

  • CSS属性 - white-space 空白属性使用说明

    CSS属性 - white-space 空白属性说明 该CSS属性用来处理空白. 值:normal | pre | nowrap | inherit 可用值 值的说明  normal 缺省值.文本自然换行.如果超过元素宽度,内容自然换到下一行.  nowrap 不允许换行.  pre 保留换行和空白.这个值只有当你声明了!DOCTYPE,且 IE 6 以上版本才支持. 在 HTML 文件里,空白,比如换行符 (line breaks). 空格 (spaces). 制表符 (tabs),都被自动截

  • word-wrap在firefox中不起作用的解决方法

    完整的css代码为 复制代码 代码如下: word-wrap:break-word; overflow:hidden; 这段代码应添加到td标签的样式中.另外,应该在外层的table标签中添加样式 复制代码 代码如下: table-layout:fixed;

  • css white-space:nowrap属性用法（可以强制文字不换行输出）

    强制不换行,直接使用white-space:nowrap即可.CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 复制代码 代码如下: div{white-space:nowrap;}

  • 用CSS动态控制文本属性

    本篇详细介绍了用CSS动态控制文本属性的文章主题,利用CSS的属性值可动态改变的特点,定义文本的多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目的. 用CSS可以很方便地动态改变文本的属性,从而可制作出动态地使文字变大.缩小.改变文字颜色.改变文本的背景.字间距.行间距等等网页特效,一切都在你的掌握之中.是不是有点玄?事实就是如此.那一定很复杂吧?不!看完本文,你就会明白,原来这么简单. 请看下面的示例: 一.动态改变文字大小 这个例子的效果是:一段文本,当鼠标在这

  • font和line-height之CSS代码书写顺序不同，导致显示效果不一样

    无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同. 即: >>> 如果先写font,再写line-height,显示效果正常 >>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE.Firefox.Opera下都出现这种BUG 具体效果请看以下代码: <p>h1:</p> <h1 style=&

  • 从零学CSS系列之文本属性

    从零学CSS系列之文本属性

    1.line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, 复制代码 代码如下: body {  font-size: 12px;  line-height: 1.5;} h1 {  font-size: 36px;} 这里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 则是 54px(36 * 1.5). 就算使用

  • 从零学python系列之数据处理编程实例（二）

    在上一节从零学python系列之数据处理编程实例(一)的基础上数据发生了变化,文件中除了学生的成绩外,新增了学生姓名和出生年月的信息,因此将要成变成:分别根据姓名输出每个学生的无重复的前三个最好成绩和出生年月 数据准备:分别建立四个文本文件 james2.txt     James Lee,2002-3-14,2-34,3:21,2.34,2.45,3.01,2:01,2:01,3:10,2-22 julie2.txt        Julie Jones,2002-8-17,2.59,2.11

  • 从零学python系列之数据处理编程实例（一）

    要求:分别以james,julie,mikey,sarah四个学生的名字建立文本文件,分别存储各自的成绩,时间格式都精确为分秒,时间越短成绩越好,分别输出每个学生的无重复的前三个最好成绩,且分秒的分隔符要统一为"." 数据准备:分别建立四个文本文件 james.txt     2-34,3:21,2.34,2.45,3.01,2:01,2:01,3:10,2-22 julie.txt        2.59,2.11,2:11,2:23,3-10,2-23,3:10,3.21,3-21

  • 从零学python系列之新版本导入httplib模块报ImportError解决方案

    之前用Python 2.7版本的httplib做接口测试时,运行代码都是正常的, 最近开始用Python 3.3之后,再去看以前的代码,发现import httplib出现错误:Unresolved import :httplib, 运行代码时也报错:ImportError: No module named 'httplib' 查找各种资料发现原来Python 2.x中的"httplib"模块在Python 3.x中变成了"http.client",就怪之前只了解了

  • 从零学python系列之浅谈pickle模块封装和拆封数据对象的方法

    封装是一个将Python数据对象转化为字节流的过程,拆封是封装的逆操作,将字节文件或字节对象中的字节流转化为Python数据对象,不要从不收信任的数据源中拆封数据.可以封装和拆封几乎任何Python数据对象,主要包括: None , True,False    整数,浮点数,复数    字符串,字节,ByteArray对象    元组,列表,集合,包含可封装对象的字典    在一个模块的顶层定义的函数    在一个模块的顶层定义的内置函数    那是在一个模块的顶层定义的类    __dict_

  • 从零学python系列之从文件读取和保存数据

    在HeadFirstPython网站中下载所有文件,解压后以chapter 3中的"sketch.txt"为例: 新建IDLE会话,首先导入os模块,并将工作目录却换到包含文件"sketch.txt"的文件夹,如C:\\Python33\\HeadFirstPython\\chapter3 复制代码 代码如下: >>> import os>>> os.getcwd()    #查看当前工作目录'C:\\Python33'>&

  • 从零学python系列之教你如何根据图片生成字符画

    从零学python系列之教你如何根据图片生成字符画

    说下思路吧: 原图->灰度->根据像素亮度-映射到指定的字符序列中->输出.字符越多,字符变化稠密.效果会更好.如果根据灰度图的像素亮度范围制作字符画,效果会更好.如果再使用调色板,对字符进行改色,就更像原图了. 这是原图: 这是生成的字符画: 废话不多说,直接上代码: 复制代码 代码如下: import Imagechars =" ...',;:clodxkLO0DGEKNWMM"fn=r'c:\users\liabc\desktop\jianbing.png'f1

  • 通过设置CSS中的position属性来固定层的位置

    定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" 实例 定位 h2 元素: h2 { position:absolute; left:100px; t

  • 从零学Python之引用和类属性的初步理解

    Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.自从20世纪90年代初Python语言诞生至今,它逐渐被广泛应用于处理系统管理任务和Web编程.Python已经成为最受欢迎的程序设计语言之一.2011年1月,它被TIOBE编程语言排行榜评为2010年度语言.自从2004年以后,python的使用率是呈线性增长. Python在设计上坚持了清晰划一的风格,这使得Python成为一门易读.易维护,并且被大量用户所欢迎的.用途广泛的语言. 鉴于以上各种优点,忍不住对Python进行

随机推荐