Question

在以下代码中

<html>
<body>
<div style="height:400px; width:400px;  -moz-border-radius:100px; -webkit-border-radius:100px; border:3px solid #500;     background-color:#a00; overflow:hidden;">
Why is this getting cut at the beginning???
</div>
</body>
</html>

为什么浏览器不会围绕圆角包裹文本。在webkit浏览器中（我测试了chrome和safari），隐藏的溢出会切割边框外的文本。 Firefox只是在边框外呈现文本。我也试过没有溢出：隐藏;但是，文本再次在边界外呈现。

Answer 1

使用填充调整内容

padding-left:20px;
padding-top:50px;

因此看起来像......

<div style="height:400px; width:400px;  -moz-border-radius:100px; -webkit-border-radius:100px; border:3px solid #500;     background-color:#a00; overflow:hidden;padding-left:20px;padding-top:50px;">

Answer 2

如果你的边界半径是100px / 你应该使用那个/

div.blabla{padding:36px;}

对于边界半径为36％/

的div，这是一个很好的填充比率

如何在具有大边框半径</div>的<div>中进行文本换行

2 个答案: