换行样式

by redky

HTML

<div class="box1">
	<p>回首向来萧瑟处 <br>
	归去 <br>
	也无风雨也无晴</p>
    <h2>box-decoration-break: slice</h2>
</div>
<div class="box2">
	<p>回首向来萧瑟处 <br>
	归去 <br>
	也无风雨也无晴</p>
    <h2>box-decoration-break: clone</h2>
</div>
<div class="box3">
	<p>回首向来萧瑟处 <br>
	归去 <br>
	也无风雨也无晴</p>
    <h2>box-decoration-break: slice</h2>
</div>
<div class="box4">
	<p>回首向来萧瑟处 <br>
	归去 <br>
	也无风雨也无晴</p>
    <h2>box-decoration-break: clone</h2>
</div>

CSS

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font: 18px/28px sans-serif;
}
div{
    position: relative;
	width: 190px;
	height: 190px;
	padding: 20px;
	margin: 0 10px 10px 0;
	float: left;
	background: linear-gradient(
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2)
    ),url(http://86art.net/sj/uploadfiles_4588/200801/20080109102731239.jpg) 0 0 no-repeat;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
p{	
	display: inline;
	padding: 5px 10px;
	background: rgba(0,0,0,.6);
	color: #fff;
}
h2{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 5px;
    text-align: center;
    font-size: 10px;
    color: #eee;
    background-color: rgba(0,0,0,.6);
}
.box1 p{
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
}
.box2 p{
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.box3 p{
    background: rgba(0,0,0,.6) url(http://jsfiddle.net/favicon.png) center center no-repeat;
    border-radius: 5px;
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
}
.box4 p{
    background: rgba(0,0,0,.6) url(http://jsfiddle.net/favicon.png) center center no-repeat;
    border-radius: 5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}