我有一个DIV元素，IMG在此图像下包含一个一行文本。我想使它包含DIV与图像宽度相同的宽度，并且可能用隐藏隐藏的溢出文本overflow:hidden。
有什么办法可以做到这一点HTML，CSS或者JavaScript在这种情况下必须使用吗？（我不需要JS解决方案）
编辑：对不起，我应该提到更多细节。图像的大小是未知的，因为页面上实际上有很多DIV带有不同图像的元素，并且在图像下的描述中，有4条不同样式的线。我之所以写“一行”，是因为只需要设置这一行的溢出即可。
有一种使用CSS做到这一点的方法，但这不是一个很好的解决方案，我不建议这样做（下面的解决方案）。但是，您可以使用jQuery非常简单地完成此操作。将容器宽度设置为页面加载时图像的大小，并使用nowrap空格将文本全部强制在一行上（用隐藏overflow:hidden）
的CSS
.wrapper{
overflow: hidden;
white-space: nowrap;
}
JS
var imgWidth = $("img").width();
$(".wrapper").css("width", imgWidth+"px")
扩展TreeTree的使用示例position: absolute。bottom:0可以将内容包装在div设置为的容器中，而不是将包装器设置为relative和在文本上使用relative。这样一来，您不必担心将文本放置在所需位置的麻烦，因为div（是自然的块元素）将位于图像下方，开始于：
.wrapper{
display: inline-block;
overflow: hidden;
padding-bottom: 60px; //some value to show content
}
.content-wrapper{
position: relative;
}
.content-wrapper p{
position: absolute;
white-space: nowrap;
}
但是在两者之间，我将使用JS版本。CSS一个不错的概念，但是有点古怪。您需要使用填充来显示文本，因为放置文本会将其从文档流中删除，因此不会记录高度或宽度。根据您使用它的目的，围绕此基础构建代码库可能会在将来产生一些重大问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句