CSS基础知识之文本属性二三事

line-height

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

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

h1 {
  font-size: 36px;
}

这里，body 元素的行高是 18px（12 * 1.5），而 h1 元素的行高则会是 54px（36 * 1.5）。

而实际工作中我们给 body 设置一个不带单位的行高值就可以很好地保证所有文字有良好的可读性，比如伟大的 Bootstrap，

body {
  line-height: 1.428571429;
}

这样做的好处就是通常情况下，其它元素只需要改变文字大小就可以了，而不用去改变行高。如果给 body 元素设置了一个固定的行高值，而后代中某个元素的字体大小超过了这个行高值就会因为行高不够而发生重叠，甚至如果该元素因为某种效果而设置了溢出隐藏的话，那么溢出那部分文字将被裁切。

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;
}

这里 span 的下划线覆盖了 p 的下划线.

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

由于文本修饰属性的延伸会造成一些兼容性的问题，所以最好的做法就是给需要修饰的文本单独设置 text-decoration 属性；不要给 img 元素之类的替换元素设置文本修饰，应该使用边框来模拟。

典型错误

a {
  color: red;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a span {
  color: green;
}

 

text-indent

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

p {
  text-indent: 2em;
}

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

text-indent: -3em;

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

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

text-indent: -9999px;

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

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

IE6/7 并不是真正地支持 inline-block，所以在 IE6/7中，inline-block 和 text-indent 并不能在一起愉快地玩耍，某些情况下可能会导致 .logo 消失不见，此情况可以使用浮动或者 block 替代 inline-block，不过两者都会改变布局方式，也可以使用其它方法。

更好的图像替换文本方式，

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

 

 

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;的原因;而该属性在 IE 8/9 中会表现得比 white-space: nowrap; 更强势，所以，像下面这样写可以保证最大限度的兼容性，

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  width: 100%;
}

 

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;

 

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;
}

 

word-break

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

word-break: break-all;

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

 

word-wrap

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

word-wrap: break-word;

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

overflow: hidden;