css - 如何将 label 元素放入 div 元素中

Question

我有一个覆盖整个窗口宽度的 div 元素和其中的一个标签。标签会动态更改，有时其中的文本会超出 div 的边界。有一个例子:

http://jsfiddle.net/VWNKC/我试过:

white-space: nowrap

在 div 和 label 上，但它不起作用。我只是想知道是否可以缩小标签内的文本以使其适合父 div 的宽度。

如果您滚动并尝试在 div 的蓝色背景结束后选择某些内容，您会看到标签超出了 div。内容还是有的。

编辑:

我不是要缩小文本，而是要显示其部分内容，比方说文本的开头。我不是要更改字体的大小，我只是想显示适合 div 的文本部分。

Answer 1

您似乎希望标签包裹在父容器内？在那种情况下 white-space: nowrap 将不起作用，这只会导致标签文本超出父容器的边界而不换行到下一行。

所以有两种方法可以做到这一点，要么让文本换行到下一行，以便标签保持在 div 的宽度内，要么通过使用以下 CSS 属性让它优雅地截断:

text-overflow: ellipsis;
overflow: hidden;