DIV 宽度根据包含的 IMG 宽度。里面文字溢出

Question

我有一个 DIV 元素，其中包含 IMG 和该图像下的一些单行文本。我想让这个包含 DIV 的宽度与图像宽度相同，并且可能用 overflow:hidden.

隐藏的溢出文本

在 HTML 和 CSS 中有什么方法可以做到这一点，或者在这种情况下我必须使用 JavaScript 吗？ (我不需要JS解决方案)

编辑： 抱歉，我应该再提一些细节。图片的大小是未知的，因为实际上页面上有很多 DIV 元素具有不同的图片，并且在图片下方的描述中有大约 4 条不同样式的行。我写'ONE LINE'只是因为只有这一行需要设置溢出

Answer 1

CSS 有一种方法可以做到这一点，但这不是一个很好的解决方案，我不推荐它（下面的解决方案）。但是，您可以使用 jQuery 非常简单地完成此操作。将您的容器宽度设置为页面加载时图像的大小，并使用 nowrap 空格以强制文本全部在一行上（用 overflow:hidden 隐藏）

CSS

.wrapper{
    overflow: hidden;
    white-space: nowrap;
}

JS

var imgWidth = $("img").width();

$(".wrapper").css("width", imgWidth+"px")

JS EXAMPLE

扩展 TreeTree 的使用示例 position: absolute。您可以将内容包装在设置为 relative 的容器 div 中，而不是将包装器设置为 relative 并在文本上使用 bottom:0。这样你就不必担心将文本定位到你想要的位置，因为 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;
}

CSS EXAMPLE

但在两者之间我会选择 JS 版本。 CSS 是一个不错的概念，但有点老套。您需要使用填充来显示文本，因为定位它会将其从文档流中移除，因此不会记录高度或宽度。根据您使用它的目的，围绕它构建代码库可能会在未来产生一些重大问题。

Answer 2

如果文本始终为一行，您可以将其设为绝对文本并向容器添加填充。

.cont {
    background:orange;
    display:inline-block;
    position:relative;
    padding-bottom:20px;
    overflow:hidden;
}

.img {
    width:100px;
    height:50px;
    background:yellow;

}

p {
    position:absolute;
    white-space:nowrap;
    margin:0;
    bottom:0;
}

FIDDLE

Answer 3

这是作为@jmore009 解决方案的same thing，但使用原生JavaScript 和id 元素：

var imgWidth = document.getElementById("myImg").width;
document.getElementById("wrapper").style.width = imgWidth+"px";

Answer 4

在 HTML 和 CSS 中有几种方法可以做到这一点，但它们可能都有些人为。

首先，请注意，只需在文本上设置一个与图像宽度相同的固定宽度，并使用简单的机制来隐藏溢出，就可以满足 所提出的问题 。示例：

.ex1 {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
}

<div class=ex1>
<img src="http://lorempixel.com/300/100/" alt="(a demo image)"><br>
This is  some text under the image. The request is to make the overflowing part hidden.
</div>

但是，这个问题可能是想问你是否可以在不将图像宽度 hard-coding 设置为 div 的 CSS 的情况下做到这一点。这样 hard-coding 实际上可能是最实用的方法。原因是其他方法似乎需要更复杂的代码。

这是一种可能的方法：将图像放在 single-cell table 中，并将文本设置为 table 标题，放在 table 下方。（纯粹主义者可能会尝试使用 CSS table。）您需要文本的内部包装器，因为当直接应用于 caption 元素时溢出管理似乎会失败。并且需要让文字垂直溢出；否则它会扩展 table 宽度。为此，将包装器的高度设置为与一行的高度相匹配。

.ex2 caption span {
  display: block;
  text-align: left;
  line-height: 1.3;
  height: 1.3em;
  overflow: hidden;
  word-break: break-all;
}

<table cellspacing=0 class=ex2>
<caption align=bottom><span>This is  some text under the image. The request is to make the overflowing part hidden.</span></caption>
<tr><td><img src="http://lorempixel.com/300/100/" alt="(a demo image)">
</table>

DIV 宽度根据包含的 IMG 宽度。里面文字溢出

DIV width according to containing IMG width. Inside text overflow

html

css

width