CSS3-文本

文本的阴影样式、盒子阴影样式、文字溢出和换行的控制

text-shadow

box-shadow

text-overflow

overflow-wrap

word-break

text-shadow

属性 text-shadow 用于给文本添加阴影，语法为：

text-shadow:水平阴影 垂直阴影 模糊阴影 阴影颜色

水平阴影：规定水平阴影的位置（阴影与文本的水平偏移，正值向右偏移，负值向左偏移），必选项
垂直阴影：规定垂直阴影的位置（阴影与文本的垂直偏移，正值向下偏移，负值向上偏移），必选项
模糊阴影：规定模糊的距离，可选项;值越大，模糊半径越大，阴影也就越大越淡
阴影颜色：规定阴影颜色，可选项；如不规定该项的值，则使用 UA（用户代理）自行选择的颜色。如果想保持跨浏览器的一致性，阴影的颜色就需要明确的被指定为一种。

.shadow1{
    margin: 50px;
    color: rgb(14, 11, 194);
    text-shadow: 0px 20px 1px #000;
}
.shadow2{
    margin: 50px;
    color: rgb(14, 11, 194);
    text-shadow: -20px -20px 7px #000;
}
.shadow3{
    margin: 50px;
    color: rgb(14, 11, 194);
    text-shadow: 0 0 50px #000;
}
.shadow4{
    margin: 50px;
    color: rgb(14, 11, 194);
    text-shadow: -40px 0 10px red,0 -40px 10px #000,40px 0 10px blue,0 40px 10px yellow;
}
<h1 class="shadow1">水平和垂直阴影都为正值，阴影呈现在原文本右下方</h1>
<h1 class="shadow2">水平和垂直阴影都为负值，阴影呈现在原文本左上方</h2>
<h1 class="shadow3">没有设置水平与垂直阴影，阴影扩散的范围就是模糊半径的范围</h1>
<h1 class="shadow4">多阴影，设置了上下左右四个边的阴影</h1>

box-shadow

属性 box-shadow 用于给盒子添加阴影，语法与 text-shadow 有些相似：

box-shadow:水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色 inset；

与 text-shadow 相比，水平阴影、垂直阴影、模糊阴影的作用和 text-shadow 的对应属性相同，另外 box-shadow 多了阴影尺寸和 inset。

水平阴影：规定水平阴影的位置（阴影与盒子的水平偏移，正值向右偏移，负值向左偏移），必选项
垂直阴影：规定垂直阴影的位置（阴影与盒子的垂直偏移，正值向下偏移，负值向上偏移），必选项
模糊阴影：规定模糊的距离，可选项；值越大，模糊半径越大，阴影也就越大越淡
阴影尺寸：阴影尺寸就是阴影外延出去的总长度
阴影颜色：规定阴影颜色，可选项；如不规定该项- 的值，则使用 UA（用户代理）自行选择的颜色。如果想保持跨浏览器的一致性，阴影的颜色就需要明确的被指定为一种
inset：阴影默认是向外发散的，inset 参数的作用就是使外阴影变为内阴影
注：参数的顺序不要乱写。

.shadow1{
    float: left;
    margin: 50px;
    width: 200px;
    height: 200px;
    background-color: #EEE8CD;
    box-shadow:0 0 0 10px #000;
}
.shadow2{
    float: left;
    margin: 50px;
    width: 200px;
    height: 200px;
    background-color: #EEE8CD;
    box-shadow: 20px 20px 10px #000;
}
.shadow3{
    float: left;
    margin: 50px;
    width: 200px;
    height: 200px;
    background-color: #EEE8CD;
    box-shadow: -20px -20px 10px #000;
}
.shadow4{
    float: left;
    margin: 50px;
    width: 200px;
    height: 200px;
    background-color: #EEE8CD;
    box-shadow: 0 0 100px #000 inset;
}
.shadow5{
    float: left;
    margin: 50px;
    width: 200px;
    height: 200px;
    background-color: #EEE8CD;
    box-shadow: -40px 0 100px red,0 -40px 100px #000,40px 0 100px blue,0 40px 100px yellow;
}
<div class="shadow1">将除阴影尺寸之外的数值都设置为0，可以看到阴影尺寸就是阴影外延出去的长度，相当于增加了 border 的宽度。需要注意的是，box-shadow 不占据空间，所以阴影尺寸虽然增加了 border 的宽度，但它并不是 border。</div>
<div class="shadow2">水平阴影和垂直阴影都为正值，阴影在原盒子右下方</div>
<div class="shadow3">水平阴影和垂直阴影都为负值，阴影在原盒子左上方</div>
<div class="shadow4">除了模糊阴影外的值都设置为 0 ，另外使用参数 inset ，阴影在盒子内部</div>
<div class="shadow5">盒子的多阴影，设置了上下左右四个阴影</div>

text-overflow

文本框经常会出现文本溢出的情况，在只有单行文本框，文本又出现溢出的情况，这时候就需要 text-overflow 来处理这些溢出的文本了。text-overflow 有三个取值：

clip ：修剪文本。
ellipsis ：显示省略符号来代替被修剪的文本。
string ：使用给定的字符串来代替被修剪的文本。

.item1{
    white-space: nowrap;/*规定段落中的文本不进行换行*/
    border:1px solid;
    width: 150px;
    overflow: hidden;
    text-overflow: clip;
}
.item2{
    white-space: nowrap;
    border:1px solid;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item3{
    white-space: nowrap;
    border:1px solid;
    width: 150px;
    overflow: hidden;
    text-overflow: "i'm string";
    /*字符串替代溢出字符的方式目前只有 Firefox 9.0+ 支持，大部分浏览器都不支持该溢出替换方式。*/
}
<div class="item1">hhhhhhhhhhhhhhhhhhhhhhhh</div>
<div class="item2">hhhhhhhhhhhhhhhhhhhhhhhh</div>
<div class="item3">hhhhhhhhhhhhhhhhhhhhhhhh</div>

overflow-wrap & word-break

overflow-wrap 和 word-break 都可以起到对单词的换行作用，前者用来表明是否允许浏览器在单词内进行短句，例如出现了一个很长的 url 或者单词，由于找不到自然段据点空格或标点符号而产生了溢出，这时候就可以使用 overflow-wrap 来解决这个问题；word-break 则是用于表明怎样在单词内进行短句。
overflow-wrap 常用的有两个取值：

normal:浏览器保持默认处理
break-word:允许在长单词内进行换行

.div1{
    margin: 50px;
    border: 1px solid;
    width: 100px;
    overflow-wrap: break-word;
}
.div2{
    margin: 50px;
    border: 1px solid;
    width: 100px;
    overflow-wrap: normal;
}
<div class="div1">Hello world!veryveryveryveryverylongword isn't it?</div>
<div class="div2">Hello world!veryveryveryveryverylongword isn't it?</div>

可以看到，句子中出现了一个很长的单词，属性 overflow-wrap 设置为 break-word ，即允许从中间断开，没有出现溢出的情况，在句子开始的 Hello World！中，可以看到这两个单词是处于两行，也就是说如果把它们放在一行内会出现溢出的情况，break-word 不会拆散短单词，所以这里出现了换行；属性 overflow-wrap 设置为 normal 时，采用浏览器默认的换行方式，出现了溢出。
word-break 有三个取值：

normal:保持浏览器默认换行方式
break-all:表明对于 non-CJK（非中文/日文/韩文）文本，可在任意字符间断行
keep-all:CJK 文本不断行，non-CJK 文本表现同 normal 。展开一点来说就是只能在半角空格或连字符处换行,也就是说，keep-all 只能在语句的正常语句起始处和单词起始处换行，如果 non-CJK 单词过长，使用值 keep-all 就有可能造成文本框溢出

.item1{
    margin: 20px;
    border: 1px solid;
    width: 100px;
    word-break: normal;
}
.item2{
    margin: 20px;
    border: 1px solid;
    width: 100px;
    word-break: break-all;
}
.item3{
    margin: 20px;
    border: 1px solid;
    width: 100px;
    word-break: keep-all;
}
<div class="item1">我爱学习，我爱学习！Hello world!veryveryveryveryverylongword isn't it?</div>
<div class="item2">我爱学习，我爱学习！Hello world!veryveryveryveryverylongword isn't it?</div>
<div class="item3">我爱学习，我爱学习！Hello world!veryveryveryveryverylongword isn't it?</div>

第一个文本框的 word-break 属性设置为 normal，可以看到,浏览器默认换行是 CJK 换行，non-CJK 换行方式是在半角空格连字符的地方换行,长单词不换行；第二个文本框的 word-break 属性设置为 break-all，可以看到 CJK 和 non-CJK 文本被随意拆分换行，不会出现文本框溢出，但是 non-CJK 文本也失去原有的样子；第三个文本框的 word-break 属性设置为 keep-all，由于只能在半角空格或连字符处换行，所以过长的 non-CJK 文本产生了溢出现象，但是每个单词都能在一行内呈现，另外，设置为 keep-all 时，CJK 文本是不断行的，在第一个逗号的地方产生了换行，第二行的我爱实验楼楼楼楼楼中间没有半角空格或连字符，所以没有换行产生了溢出，直到感叹号的地方才产生换行。
重点是文本的溢出和换行控制，overflow-wrap 和 word-break 有些相似，但又有很大的区别。