对文本的处理，必要的属性

在写一个标签中都是文本的情况下，最好加上以下属性，避免为了兼容重复修改等问题。

首先了解下普通的文本有哪些属性：

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

在一段长篇的文本中，必要加的属性有哪些呢？

• text-align: justify; //实现两端对齐文本效果
• word-wrap: break-word; //自动换行
• word-break: break-all ; //允许在单词内换行 建议用这个！！！
• white-space：nowrap; //不允许换行
• text-overflow: ellipsis; //文本超出显示省略号
• -webkit-text-size-adjust: 100%; //防止横屏后字体变大

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于：

word-wrap: normal | break-word;
word-break: normal（使用浏览器默认的换行规则） | break-all（允许在单词内换行） | keep-all（只能在半角空格或连字符处换行）;

1. word-break:break-all 如果行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2. word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

单行超出显示省略号写法

/*单行文本的溢出显示省略号*/
   .pl{
       width: 200px;
       overflow:hidden;
       text-overflow:ellipsis; 
       white-space: nowrap;
   }

多行超出显示省略号写法

/*多行文本溢出显示省略号*/
#p2{
    width: 220px;
    height: 58px;
    overflow:hidden;
    text-overflow:ellipsis; 
    background: greenyellow;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
    display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
}