我无法通过边框工作在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;和溢出包装：断字；但是这些都不起作用。需要任何建议。预先感谢。

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>

希望有帮助

Answer 2

使用padding到div

* {
  margin: 0;
}

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

<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>

Answer 3

使用overflow:hidden并在其中添加一些填充...

* {margin: 0;}

div {
  background-color:green;
  height:900px;
  width:50%;
  margin:auto;
  border-radius:50px;
  overflow:hidden;
  padding: 1rem;
  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>