文本效果

css文本效果总结

text-shadow

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色

和div的box-shadow 差不多。就不多说了

word-wrap,word-break,white-space

首先贴出代码

<div>
    haha ssssssssssssssssssssssssssssssssssssssssssssssss
</div>

div{
    width:100px;
    background:red;
}

在没有任何代码的情况下

可以看到浏览器，自动把长单词挤到下一行，不换行。

word-wrap

div{
    width:100px;
    background:red;
    word-wrap:break-word;
}

浏览器把长单词挤到下一行，长单词换行。

word-break

div{
    width:100px;
    background:red;
    word-break:break-all;
}

浏览器没有把长单词挤到下一行，而且长单词自动换行。

white-space

用于处理元素内的空白

div{
    width:100px;
    height:100px;
    background:red;
    white-space:nowrap;
}

text-overflow

值	描述
clip	修建文本
ellipsis	显示省略符号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本。

ps:此属性设置的前提是设置overflow:hidden和white-space:nowrap

div{
    width:100px;
    height:100px;
    background:red;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}