html - CSS 文本尊重边框半径

Question

你好!

我需要一个很酷的边框半径效果。所以我用这个 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 内的所有空间而不溢出它。我试过“overflow-wrap: break-word;”，但结果和这里的第二张图一样。 我无法制作包含文本的图像，因为我希望它具有响应能力。

这背后的 secret CSS 是什么？这可能吗？

Answer 1

考虑在 shape-outside 中使用隐藏的 div 元素CSS 规则。您可以通过使用 shape-outside 来定义将文本“推”成您需要的形状的多边形，从而非常精确地控制文本的流动。