文本溢出和描边

1.文本溢出：

当我们用p标签来包裹一端文字性的内容的时候，如果我们给p 标签设置了宽和高，并且设置了border,在文字内容较多的时候，文本内容就会超出p标签的区域，对于布局会造成一定的影响，例如：

p{

width:300px;

height: 300px;

border:1px solid red;

}

此时，解决的办法是：

① overflow: hidden;

/*默认为visible*/

②当我们不设置的时候，会默认overflow: visible;

③我们也可以用/*显示滚动条*/

overflow: scroll;

④或者/*超出的时候显示滚动条，不超出的时候不显示滚动条*/

overflow: auto;

来解决问题。

2.描边（多重）

固定格式如下:

p{

font-size: 30px;

font-weight: 900;

-webkit-text-stroke:1px red;//这里的是第一层描边，也是最内层

position: relative;//定位必须要有，否则无法显示，元素自身定位相当于伪元素的父级，所以用relative。

z-index: 0;//元素自身的层级一定要比它的伪元素的层级高

}

p::before,p::after {  

  content: attr(data-text); //固定写法

   position: absolute; left: 0;    z-index: -1;//定位，且层级不能高于元素本身

}

p::before {  

  -webkit-text-stroke: 7px yellow;//由于这里的before和下面的after都是定位在同一个位置，并且这里的before描边是在最外层，所以，其像素值一定要大于::after;

}

p::after {    

-webkit-text-stroke: 2px red;

}

<p data-text="多重描边">多重描边</p>//注意：这里的data-text不能省略，且属性值必须要与标签包裹的内容相同。