zhangbaba07 2023-05-23 12:17 采纳率: 60%
浏览 17

关于#html5#的问题：想要文字围绕着这个偏透明的盒子

img


想要文字围绕着这个偏透明的盒子。这个盒子里面是几个p标签。试了首行缩进也没有用。

  • 写回答

2条回答 默认 最新

  • wusp1994 2023-05-23 17:15
    关注
    
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文字环绕红色盒子效果</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: red;
            padding: 20px;
            margin-right: 20px;
            float: left;
            shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
            /* 当文字超出了形状时，使用 Ellipsis（省略号）隐藏超出的文本 */
            text-overflow: ellipsis;
            overflow: hidden;
        }
        p {
            float: right;
            width: 200px;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div class="box"></div>
<p>在前端开发中，如何实现文字环绕效果呢？如果你的页面设计比较复杂，往往会面对此类问题。本文将以一种简单的方式教会大家如何实现文字环绕红色盒子的效果。</p>
<p>文字环绕通常都是跟图片等元素连用比较多，但是在实际开发中，文字环绕也可能会出现在我们的其他元素里面，例如上述例子中的文字环绕盒子，也可能是一个程序员小哥哥的头像。</p>
<p>通过运用CSS3提供的shape-outside属性，我们就可以应对这样的场景，来实现文字自动环绕的效果。而且最棒的是，这个属性也被 IE 11 和 Edge（仅限于 Windows 版）支持了。</p>
<p>这里再介绍一下text-overflow属性，它是用来设置文本溢出时的处理方式，例如当文本超出边界时，它可以自动省略，或者在省略处显示省略号。在本示例中，我们结合使用text-overflow:ellipsis和overflow:hidden来实现文本溢出时隐藏省略。</p>
<div style="clear: both;"></div>
</body>
</html>
    评论

报告相同问题？

问题事件

  • 创建了问题 5月23日

悬赏问题

  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog
  • ¥15 Excel发现不可读取的内容