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;
}
