如何将标签元素放入 div 元素内



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

http://jsfiddle.net/VWNKC/我尝试了:

white-space: nowrap

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

如果您滚动并尝试在div 的蓝色背景末尾选择某些内容,您可以看到标签超出了div。还有内容。

编辑:

我不是要缩小文本,而是要显示其部分内容,让我们说文本的开头。我不是想改变字体的大小,我只是想显示适合div的文本部分。

似乎您希望标签包装在父容器内?在这种情况下,空格:nowrap 将不起作用,这只会导致标签文本超出父容器的边界而不换行到下一行。

因此,有两种方法可以执行此操作,一种是让文本换行到下一行,以便标签保持在div 的宽度内,另一种是使用以下 CSS 属性将其正常截断:

text-overflow: ellipsis;
overflow: hidden;

最新更新