文本换行问题

     这里总结文本显示时实现各种显示效果的属性方法。

     换行？不换行？如何换行？默认效果是怎样？

     div的默认效果：对于中文文本自动换行，溢出也显示，并且宽继续起作用

     英文的默认效果：单词长度超过之后，直到遇到空格，认为单词结束才会换行显示

1. 换行
   

           自动换行   p { word-wrap:break-word; word-break:normal; }

           强制英文单词断行   p { word-break:break-all; }

           *注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

            span { display:block; }

        这里有必要要介绍下word-wrap和word-break的区别

• word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，

• word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句，green放到下一行；

• word-break:break-all当这一行放不下的时候就直接强制断句了,注意 green被截断。

       2.强制不换行

        p { white-space:nowrap; }

• text-overflow : clip | ellipsis

       clip : 默认值。不显示省略标记(...)，而是简单的裁切
       ellipsis : 当对象内文本溢出时显示省略标记(...)

• white-space:用于描述如何处理元素中的空白
  

     

• overflow : visible | auto | hidden | scroll
  

      visible : 默认值。不剪切内容也不添加滚动条, clip 属性设置将失效。
      auto : 在必需时对象内容才会被裁切或显示滚动条
      hidden : 超过对象尺寸的内容隐藏
      scroll : 总是显示滚动条

实现文本溢出省略号显示，以下属性都是必须的，缺一不可

        width:200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;