CSS-文字段落属性（+）

列个工作中用的CSS段落清单，方便随时查看。
对CSS属性的遗忘，一半是对英文涵义不做了解，再者是有些属性不常用，一来二去即便简单的内容，都要反复查找。

• text-decoration 文字装饰

html

<h1>this is heading 1</h1>
<h2>this is heading 2</h2>
<h3>this is heading 3</h3>
<h4>this is heading 4</h4>

css

h1{
  // 帽子
  text-decoration:overline;
}

h2{
  // 腰带
  text-decoration:line-through;
}

h3{
  // 鞋子
  text-decoration:underline;
}

h4{
  // 光脚
   text-decoration:none;
}

效果见链接text-decoration

• white-space
  单独使用，应该算作是一个鸡肋属性，不过遇到需要将文字省略，配合使用，会得到多余文本省略的效果

css

#div1{
    white-space:nowrap; // 取消限制，内容不换行
    overflow:hidden; // div内容隐藏
    text-overflow: ellipsis; // 文本省略
}

适用于新闻摘要，效果见链接 w3schools

normal正常
nowrap 不换行
pre 不换行-前加空白段
pre-line 换行-前加空白段，暂未用到
pre-wrap换行-前加空wrap，暂未用到
initial初始化，同normal
参考链接w3schools

• text-overflow

  clip 意思如其名字，word从中间砍掉，后边的不显示
  ellipsis 来，一起学英文，省略号
  initial 初始化
  效果见链接w3schools

• writing-mode
  20160504更新writing-mode部分，lr-tb,tb-rl最先是ie支持，之后新标准成立后，chrome保留此部分，但不实现此功能，需要使用：
  -webkit-writing-mode:vertical-rl
  FF一直不能友好支持
  参考链接《 CSS Writing Mode 现状》
  DEMO演示
  维基百科解决办法-最终选用的办法
  其他参考CSS 兼容IE和火狐的文字竖排

---

此方法用于文字写作习惯，属于CSS3,不过ie8+是部分支持一些基本属性：

writing-mode:lr-tb 由左向右，从上到下
writing-mode:tb-rl 从上到下，由右到左

• 测试rl-tb,bt-lr...都是无效属性，无需再测试。

• 使用时，需要配合text-align会得到不同的结果。
  效果见下writing-mode
  另外，writing-mode有一些高级用法，使用到SVG，需要标准浏览器，以后更新，详细见MDN-writing-mode
  有关writing-mode的详细介绍，参见CSS3
  Text Module

• word-wrap
  允许长单词换行到下一行：

word-wrap: normal|break-word;