text-overflow:

　　　　clip　　/　　ellipsis　　/　　string;

　　　　clip:　　超出部分切除；

　　　　ellipsis:　　超出部分用省略号代替；

　　　　string:　　超出部分用指定的字符串代替；只在火狐浏览器中有效，其他浏览器无效；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style type="text/css">
        .test1{
            width:200px;
            height:45px;
            background: yellow;
            color:blue;
            margin:100px auto;
            white-space:nowrap;
            overflow: hidden;
            text-overflow:clip;
            
        }
        .test2{
            margin:200px auto;
            width:200px;
            height:45px;
            background: yellow;
            color: blue;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
        }
        .test3{
            margin:200px auto;
            width:200px;
            height:45px;
            background: yellow;
            color: blue;
            overflow:hidden;
        }
        .test3>p{margin:0;padding:0;position: relative;}
        .test3 >p:before{
            content:'…';
            display: table;
            width:10px;
            height:15px;
            position:absolute;
            left:176px;
            top:20px;
            padding-left:5px;
            padding-right: 5px;
            padding-bottom: 5px;
            background: yellow;
        }
        .test4{
            margin:200px auto;
            width:200px;
            height:45px;
            background: yellow;
            color: blue;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:'>>';  /*只在火狐有效，其他浏览器无效；*/
        }
    </style>
</head>
<body>
    <div class="test1">这也是一段测试文本这也是一段测试文本这也是一段测试文本这也是一段测试文本这也是一段测试文本</div>
    <div class="test2">这也是一段测试文本这也是一段测试文本这也是一段测试文本这也是一段测试文本这也是一段测试文本</div>
    <div class="test3"><p>这也是一段测试文本这也是一段测试文本这也是一段测试文本这也是一段测试文本这也是一段测试文本</p></div>
    <div class="test4">这也是一段测试文本这也是一段测试文本这也是一段测试文本这也是一段测试文本这也是一段测试文本</div>
</body>
</html>

 

　　text-shadow　　　　　h-shadow　　v-shadow　　blur　　color;

　　　　类似于box-shadow，前两个值必填，后两个为可选；

　　　　h-shadow:　　水平偏移量；

　　　　v-shadow:　　垂直偏移量；

　　　　blur:　　模糊距离：

　　　　color：　　阴影颜色；

 

　　word-break:　　normal　　/　　break-all　　/　　keep-all;

　　　　normal:　　浏览器默认换行方式；

　　　　break-all:　　随处可以换行（长词内部换行）；

　　　　　　　　　　当行尾放不下一个单词时，强行放，多出来的换行；

 

　　　　keep-all:　　只有半角空格或连字符处换行（长词内不换行）；

　　　　　　　　　　当行尾放不下一个单词时，换行，如果换行后还放不下，不管了放了，多出来的换行；

 

　　word-wrap:　　normal　　/　　break-word;

　　　　normal:　　只允许在断字点换行；

　　　　　　　　　　单词太长，换行，还不行，就溢出显示；

　　　　break-word:　　在长单词或URL地址内部进行换行；

　　　　　　　　　　　　单词太长，先尝试换行，换行后还不行，单词内换行；

 

　　white-space：　　//通常，上述两个样式会结合white-space（空白处理）一起使用；