shape-outside 属性:当元素浮动的时候,元素周围的文字内容以何种方式环绕。
shape-outside: url(图片地址); 文字通过计算图片的透明度后获取的形状区域进行围绕。
(注意:图片必须有透明的区域。比如一张人像照,你把人像外的背景扣掉就行)。
word-break: normal | break-all | keep-all;
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字围绕图片</title>
<style>
img{
float: left;
/* 这里的图片要和下面的一致 */
shape-outside: url(./01.png);
}
p{
font-size: 55px;
/* 这个是为了p标签里的内容, 不管什么情况都可以换行,当然这个不是必须的 */
word-break: break-all;
}
</style>
</head>
<body>
<img src="./01.png">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil et
quo ipsam cupiditate nesciunt esse vero excepturi ab? Magnam ea doloribus
nesciunt veniam incidunt delectus ut animi corporis explicabo voluptas.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eos provident,
eligendi unde facilis ullam recusandae ad esse saepe, praesentium incidunt
nostrum asperiores. Magnam architecto ipsa molestias sint corrupti quas?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis unde
qui delectus saepe voluptate, perspiciatis itaque asperiores. Quod hic,
aliquid molestias obcaecati facilis quibusdam, excepturi odio laborum,
ipsam odit temporibus!
</p>
</body>
</html>
一张别人抠好的图片^0^