Html CSS文本边界半径 你好！

我需要一个很酷的边界半径效果。所以我用这个CSS做了一个div：

div#second
{
    max-width: 50%;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 100px;
    border-top-right-radius: 200px;
    padding-right: 110px;
    padding-left: 110px;
    overflow-wrap: break-word;
}

div#second p 
{
    text-align: none;
    overflow-wrap: break-word;
}

在它里面，有一个带有一些文本的段落标记。问题是，它里面的文本要么溢出了div，要么留下了太多的空白。在这里你可以明白我的意思：

我想要的是让文本使用de div中的所有空间，而不会溢出。我尝试过“溢出包装：打断word；”，但结果与这里的第二个图像相同。 我无法制作一个已经包含文本的图像，因为我希望它能够响应

---

这背后的秘密是什么？这可能吗？

一个简单的解决方法是在文本重叠的角落添加一个透明图像，并将文本环绕在图像周围

尝试使用填充

 div#second p 
    {
        text-align: none;
        overflow-wrap: break-word;
        color:#fff;
        padding:20px;
    }

---

不幸的是，简短的回答是，没有简单的方法可以让你做到这一点。使用

边框半径

，甚至

剪辑路径

，浏览器将这些元素呈现为框

现在我们已经解决了这个问题，您可以通过以下几种方法来解决这个问题：

一个选项是使用mixin来帮助在非框容器中塑造文本

这个选项可能会带来一些开销，但它似乎是最接近您需要的

如果知道div的最终结果维度并且文本始终相同，则可以在父div内创建多个div，并相应地添加填充。（这只是一个值得思考的问题，因为我知道你希望部门做出反应）

---

如果您还有任何问题，请告诉我：）

考虑在css规则中使用隐藏的

div

元素。通过使用

shapeoutside

定义将文本“推”到所需形状的多边形，可以非常精确地控制文本的流动