文字环绕图片

最新推荐文章于 2023-10-06 20:39:28 发布

「已注销」

最新推荐文章于 2023-10-06 20:39:28 发布

阅读量148

点赞数

分类专栏：案例文章标签： html css

本文链接：https://blog.csdn.net/lyc_3858/article/details/125208578

版权

案例专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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^