CSS文本处理

1、单词换行
*注意：只对英文起作用，以单词作为换行依据

 .box {
	    border: 1px solid red;
        width: 100px;
        word-wrap: break-word;
    }

2、文本换行
*注意：只对英文起作用，以字母作为换行依据

    .box {
        border: 1px solid red;
        width: 100px;
        word-break:break-all
    }

3、强制换行
*注意：只对中文起作用，强制换行，这个输出格式和节点内写的格式一样，类似于标签<pre>

    .box {
        border: 1px solid red;
        width: 100px;
        white-space: nowrap;
    }

4、强制不换行
*注意：强制不换行，中英文都起作用

    .box {
        border: 1px solid red;
        width: 100px;
        white-space:nowrap;
    }

5、一行文本，超出部分用省略号代替

    .box {
        border: 1px solid red;
        width: 100px;
        white-space:nowrap;
        overflow:hidden; 
        text-overflow:ellipsis; 
    }

6、多行文本，超出部分用省略号代替

    .box {
        border: 1px solid red;
        width: 100px;
        overflow: hidden;
        display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical;/*从上到下垂直排列子元素*/
        -webkit-line-clamp: 3;/*设置行数*/
        text-overflow: ellipsis;/*隐藏部分以省略号显示*/
    }

7、民间偏方，超出部分用省略号显示

    <div>
        <span class="txt">大风起兮云飞扬，安得猛士兮守四方，威加海内兮归故乡</span>
        <span class="span_"></span>
    </div>

    .txt {
        height: 40px;
        width: 150px;
        border: 1px solid red;
        display: inline-block;
        overflow: hidden;
    }
    .span_:after {
        content: "...";
        display: inline;
    }