如何将文本限制为div的宽度？

Question

我正在尝试将文字限制为div的宽度，但无法使其正常工作。

它说TESTE3我希望文本不要越过红色div的边缘。有人可以帮我吗？ Image sample

Answer 1

我建议您使用内置代码编辑器或jsfiddle为我们提供示例代码。

然而，有两种方法可以解决您的问题。

您可以转到overflow:hidden;，如下所示：https://jsfiddle.net/L62w981g/

或者您可以使用word-break或white-space将文字转到下一行，如下所示：https://jsfiddle.net/L62w981g/1/

以下是溢出修复的代码：

div {
  background-color:red;
  height:60px;
  overflow:hidden;
  width:350px;
}

<div>
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkthistextishidden
</div>

以下是空白区域修复的代码：

div {
  background-color:red;
  height:60px;
  overflow:hidden;
  width:350px;
  word-break:break-all;
  white-space:normal;
}

<div>
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkthistextishidden
</div>

Answer 2

使用此CSS：

word-break: break-all;