Question

我有一个DIV元素，其中包含IMG和此图片下的一些行文字。我想将DIV包含与图像宽度相同的宽度，并使用overflow:hidden隐藏溢出文本。

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

编辑：抱歉，我应该提一些细节。图像的大小是未知的，因为实际上页面上有很多DIV元素具有不同的图像，并且在图像的描述中有4个不同样式的线条。我写了一行＃39;只是因为只有这一行需要设置溢出。

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的示例。您可以将内容包装在设置为bottom:0的容器div中，而不是将包装器设置为相对并在文本上使用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;
}

CSS EXAMPLE

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

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

然而，这个问题可能是为了询问您是否可以在不将图像宽度硬编码为div的CSS设置的情况下执行此操作。这种硬编码实际上可能是最实用的方法。原因是其他方法似乎需要更复杂的代码。

这是一种可能的方法：将图像放在单个单元格表中，并将文本设置为表格标题，放在表格下方。（纯粹主义者可能会尝试使用CSS表来执行此操作。）您需要文本的内部包装器，因为直接应用于caption元素时溢出管理似乎失败。你需要让文本垂直溢出;否则它会扩展表格宽度。为此，设置包装器的高度以匹配一行的高度。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

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

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

DIV宽度根据包含IMG宽度。内部文字溢出

4 个答案: