CSS3文本

长字母或数字自动换行

word-wrap: break-word;
word-break: break-all;

单行文本超出显示省略号

overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;

一，text-overflow  用来设置当文字溢出时是用省略号还是切断

但是text-overflow只是说明了文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还需要定义强制文本在一行内显示（white-space:nowrap），以及溢出隐藏（overflow:hidden）只有这样才能实现溢出时文本省略号显示

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

二，white-space 用来控制空白字符显示，并且控制换行

它有5个值：nowrap   normal   pre   pre-wrap   pre-line

normal  是默认的，写不写区别不大

nowrap  不换行，并且空格合并了（没有空格了）

pre  

#box{
        margin:12px;
    padding:12px;
    width:300px;
    background:#f1f1f1;
    border:1px solid #bababa;
    line-height:32px;
    font-size: 15px;
    font-family: "微软雅黑";
    }
<div id="box">
        sdfsdfsd撒旦发射点士大夫胜多负少
        士大夫士大夫士瑟得瑟得瑟得瑟得瑟ddddddddddddddddpppppppppppppppppppppp
        sfsddddddooooooooooooooodddd烦烦烦烦烦烦方法是
</div>

这是没写white-space的样子

加了  white-space:normal  和上面一样没变化

加了  white-space:nowrap  不换行并且没有空格

加了  white-space:pre  保留空格和换行符，但没有自动换行

加了  white-space:pre-wrap  保留空格和换行符，可以自动换行

加了  white-space:pre-line  没有了空格但是还可以换行

三，word-wrap  当行超过容器的边界时，是否断开换行

四，text-transform

text-transform:uppercase | lowercase | capitalize  可用于所有字句变成大写或小写字母，或每个单词的首字母大写

五，font-weight  设置文字的粗细，100-900  400相当于normal  700相当于bold  900最粗

六，text-shadow  文本阴影   text-shadow: 水平阴影位置  垂直阴影位置  模糊距离  颜色