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不能省略,且属性值必须要与标签包裹的内容相同。