8.12
1.文本换行
1.1.word-wrap 文本换行
一般情况情况下文本默认换行但是当文本是纯数字时不会进行换行操作
1.normal 默认值（浏览器保持默认处理）。
2.break-word 在长单词或 URL 地址内部进行换行。
选择器{ word-wrap:属性值; }
1.2.word-break 文本换行方式
word-break 属性设置自动换行的处理方式 取值 ：
1.normal 使⽤浏览器默认的换行规则。
2.break-all 允许在单词内换行。
3.keep-all 只能在半⻆空格或连字符处换行。
选择器{ word-break:属性值; }
1.3.white-space 不允许文字换行
nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 < br >标签为止。
选择器{ white-space:属性值; }
1.4. text-overflow 文本溢出时剪切文本
ellipsis 显示省略符号来代表被修剪的文本。
1.5.单行文本省略
选择器{ width:100%; float:left; /*不让文字换行*/ white-space:nowrap; /*溢出隐藏*/ overflow:hidden; /*添加省略符号*/ text-overflow:ellipsis; }
1.6.多行文本省略
HTML
<ul> <li>1.中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li> <li>2.念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li> <li>3.外交部：中美双方正就元首会晤的具体安排保持密切沟通</li> <li>4.今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li> <li>5.俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li> </ul>
CSS
ul{ width: 200px; } li{ width:100%; margin-top:30px; margin-left:30px; /*标签变为弹性盒子*/ display:-webkit-box; /*按照垂直方向排序*/ -webkit-box-orient:vertical; /*保留对应的行数*/ -webkit-line-clamp:2; /*多余的行数隐藏*/ overflow:hidden; }
效果展示
2.文字阴影
在css3中使用text-shadow属性来设置文字的阴影，他是一个综合属性内填四个属性值，先后顺序以及对应的意义为
1.x-shadow水平方向上偏移量，可以为负值（必填）
2.y-shadow垂直方向上偏移量，可以为负值（必填）
3.blur模糊的半径距离（可选）
4.color阴影的颜色（可选）
其中有三种情况，每一段属性值之间使用 , 隔开，具体方式如下
/*单层阴影*/ 选择器{ text-shadow: -5px -5px 3px black; } /*多层阴影*/ 选择器{ text-shadow: 5px 5px 3px red,8px 8px 3px orange,11px 11px 3px yellow,14px 14px 3px green,17px 17px 3px yellowgreen,20px 20px 3px greenyellow,23px 23px 3px blue; } /*正阴影*/ 选择器{ text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 70px #ff00de; }
3.盒子阴影
在css3中使用box-shadow属性来设置盒子的阴影，他是一个综合属性内填属性值，先后顺序以及对应的意义为
1.h-shadow水平方向上偏移量，可以为负值（必填）
2.v-shadow垂直方向上偏移量，可以为负值（必填）
3.blur模糊的半径距离（可选）
4.spread阴影的尺寸（可选）
5.color阴影的颜色（可选）
6.inset将外阴影改为内阴影（可选）
选择器{ box-shadow: -5px -5px 3px black; }
4.文字描边
text-stroke用来为文本添加描边效果的css属性，但请注意，它并非标准CSS属性，而是WebKit（如Safari和Chrome）浏览器专有的CSS扩展属性，为了兼容其他浏览器，通常会配合 -webkit-text-stroke 和 -moz-text-stroke 等私有前缀属性一起使用。
需要注意的是，使用-webkit-text-stroke会导致文本的渲染性能下降，特别是当文本内容非常多或者在移动设备上时，可能会影响到性能和体验。
它具有两个属性分别是stroke-width和color
1.stroke-width规定文本描边的宽度，可以用长度单位（如 px、em 等）指定。
2.color描边的颜色。可以是任何有效的CSS颜色值
示例：
HTML
<div class="container container1">1像素宽的红色描边</div> <div class="container container2">0.06em的红色描边</div>
CSS
.container1{ -webkit-text-stroke: 1px red; } .container2{ -webkit-text-stroke: 0.06em red; }
效果如下
5.镂空文字
只需要加上文字描边的属性将文本的颜色设置成透明色即可
CSS，HTML同上4.HTML
.container { font-size: 36px; color: transparent; } .container1 { -webkit-text-stroke: 1px red; }
6.文本的垂直居中
6.1.单行文本的垂直居中
可使用行高的特性使单行文本来进行居中
HTML
<div class='box'> 比如，当前热映《长清湖》超越了《你好，李焕英》票房 </div>
CSS
.box{ width: 300px; height: 300px; border: 1px solid #f00; line-height: 300px; }
6.2.多行文本的垂直居中
通过CSS属性使div标签具有table标签的特性来进行多行文本的居中
HTML
<div class='box'> 比如，当前热映《长清湖》超越了《你好，李焕英》票房，这是很不容易的。要知道当初《你好，李焕英》不仅拥有天时（影院放开不久），还有人和。贾玲与刘德华互联网上频繁互动，为影片上映做好了预热，不大卖都难。 </div>
CSS
.box{ width:300px; height:300px; border:1px solid #f00; /*将div修改为table单元格的特性*/ display:table-cell; /*垂直居中*/ vertical-align:middle; }
7.伪类和伪元素
7.1.伪类
伪类的主要作用是向某些选择器添加特殊的效果，他的一般格式是： 选择器:伪类类型{样式}
最具有代表性的就是a标签，a标签有几种状态分别是
1.没有访问过的链接状态
2.已经访问过的链接状态
3.鼠标悬停时的链接状态
4.鼠标长按时的链接状态
如果在页面中四种状态要同时写入的话需要按照正确的书写顺序，不然可能无法生效，顺序为
link-visited-hover-active（l-v-h-a）
a:link{color:#FF0000;} /*没有访问过的链接状态*/ a:visited{color:#00FF00;} /*已经访问过的链接状态*/ a:hover{color:#FF00FF;} /*鼠标悬停时的链接状态*/ a:active{color:#0000FF;} /*鼠标长按时的链接状态*/
除此之外还有其他常⻅的伪类选择器 :focus（聚焦），:first-child（第一个元素）， :last-child（最后一个原色）等
7.2.元素的获取
伪元素不是真正的元素，不存在与文档之中，所以 js 无法对它进行操作。为什么叫他“元素”？因为我们可以对其进行跟元素几乎无差别的操作。
:first-child /* 第一个子元素 */ :last-child /* 最后一个子元素 */ :only-child /* 只有一个子元素 */ :root /* 根标签 */ :nth-child(n) /* 第几个子元素 */ ul li:nth-child(1){color:#f00;} /* 第一个子元素 - 从1开始 */ ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */ :nth-child(odd) /* 奇数元素 */ :nth-child(even) /* 偶数元素 */ :nth-last-child(-n+4) /* 后4个元素 */
7.3.伪元素
伪元素的主要作用来添加⼀些选择器的特殊效果。最好使用双冒号，防止与伪类混淆
常见的伪元素选择器
1 .::first-line 首行
2. ::first-letter 首字母
3 ::before 元素前插入
4. ::after 元素后插入
5. ::placeholder：选取输入字段中的占位文本。
6. ::first-letter 伪元素用于向文本的首字母设置特殊样式：
7.4.before与after的用法总结
before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。 当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置高宽度等属性需要首先设置为块元素。 content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ' ; before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
