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中的所有空间而不会溢出。我试图“溢出包装：break-word;”，但结果与此处的第二张图片相同。 我无法制作包含文本的图像，因为我希望它具有响应性。

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

Answer 1

考虑将隐藏的div元素与shape-outside css规则一起使用。您可以使用shape-outside定义可以将文本“推入”所需形状的多边形，从而非常精确地控制文本的流动。

Answer 2

一个简单的解决方法是将透明图像添加到文本重叠的角上，并使文本环绕图像。

Answer 3

尝试使用填充

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

Answer 4

遗憾的是，简短的答案是您没有简单的方法可以执行此操作。使用border-radius甚至clip-path，浏览器会将这些元素呈现为框。

现在我们已经解决了这个问题，有几种方法可以解决此问题：

1. 一种选择是使用混合来帮助在非框式容器https://skeate.github.io/2015/07/13/Wrapping-Text-to-Fit-Shaped-Containers-with-CSS.html内对文本进行整形

此选项可能会花费一些开销，但似乎与您需要的东西最接近

1. 如果您知道div的最终结果尺寸并且您的文本将始终相同，则可以在父div内创建多个div，并相应地添加填充。 （这只是一些值得深思的内容，因为我知道您希望div能够响应）

让我知道您是否还有其他问题：）