html - 我无法通过边框工作在我的 div 中获取此文本

Question

* {
  margin: 0;
}

div {
  background-color: green;
  height: 900px;
  width: 50%;
  margin: auto;
  border-radius: 50px;
  border: 4px solid red;
  box-sizing: border-box;
}

<div>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . </div>

你好，我似乎无法让这个 div 正常工作。我不希望此文本像现在这样脱离此 div。有什么解决办法吗？我已经尝试设置 word-break:break-all;和 overflow-wrap: break-word;但这些都没有用。需要任何建议。提前致谢。

Answer 1

当你使用 border-radius 时，浏览器不会考虑这一点，它仍然会把它渲染成一个矩形，半径只是视觉上的。

您可以像这样使用填充来更正它:

* {
  margin: 0;
}

div {
  background-color: green;
  height: 900px;
  padding: 25px;
  width: 50%;
  margin: auto;
  border-radius: 50px;
  border: 4px solid red;
  box-sizing: border-box;
}

<div>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . </div>

希望对你有帮助