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

Question

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

在上面写着 TESTE3 的地方，我希望文本不要越过红色的边缘 div。谁能帮帮我吗？ Image sample

Answer 1

使用这个CSS:

word-break: break-all;

Answer 2

我建议您使用内置代码编辑器或 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>

这是白色-space修复的代码：

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

<div>
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkthistextishidden
</div>

How can I limit the text to a div's width?