CSS空白长文本不换行到下一行

Question

我在DOM

中动态呈现了以下结构

<div>
<span>
<label>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</label>
</span>
</div>

对于上面的情况(所有W的长文本)，我想把文本换行到下一行(或者甚至用省略号截断文本，如果可以通过CSS完成的话)

我已经尝试了所有的空白值(尝试应用到所有3个DOM元素)，但它不是包装。是否有一些其他的属性，我需要检查，这可能会阻止文本包装到下一行?

只是补充一下，我在一个伸缩容器中有这个结构。

Answer 1

在label元素上需要word-break: break-word;或overflow-wrap: break-word;。但是请考虑到你的例子是完全不现实的——真实的句子/短语包含空格，而真实的单词几乎没有那么长。

div {
width: 200px;
}
label {
overflow-wrap: break-word;
}

<div>
<span>
<label>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</label>
</span>
</div>

Answer 2

添加word-break样式

label {
word-break: break-word
}

<div>
<span>
<label>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</label>
</span>
</div>