如何在 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;