html - 将 div 的宽度限制为父宽度，否则使用椭圆

Question

我想构建一个容器，在左侧包含一个图像，在它的右侧应该有一些关于它的信息，比如标题和一些描述。

我希望容器能够在最小和最大宽度之间动态扩展。图像在两个边界之间也可以有不同的宽度，如果容器已经有最大宽度，但标题较长，标题应该缩短并且应该出现一些点。

我找到了一种缩短标题的方法，如下所示:http://jsfiddle.net/h0452569/ ，但因此我需要限制图像旁边容器的宽度。我用下面的代码试过这个，但我找不到用 CSS 动态限制 div 宽度以不扩展容器的 div 的方法!

如果有人有想法，我会很高兴!

jsfiddle

HTML:

<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
    <div class="headline">Some very very very long headline</div>
    <div class="description">Some description</div>
    <div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>

CSS:

.container {
  min-width: 200px;
  max-width: 250px;
  max-height: 100px;
  position: absolute;
  border: 1px solid #666666;
  white-space:nowrap;
}

.image {
  float: left;
  display: inline-block;
  vertical-align: top;
}
.image img {
  max-width: 100px;
  max-height: 80px;
  vertical-align: top;
}
.meta-container {
  overflow: hidden;
  text-overflow:ellipsis;
  display: inline-block;
}
.headline {
  width: 100%;
  white-space:nowrap;
}
.description {
  font-size:.8em;
}

Answer 1

在example you refer to ，这些样式被添加到文本元素本身。在您的设计中，样式被赋予父元素。

解决方案:将样式添加到 .headline 而不是 .meta-container。

.container {
  min-width: 200px;
  max-width: 250px;
  max-height: 100px;
  border: 1px solid #666666;
  overflow: hidden;
}
.image {
  float: left;
}
.image img {
  max-width: 100px;
  max-height: 80px;
  vertical-align: top;
}
.headline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.description {
  font-size: .8em;
}

<div class="container">
    <div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
    <div class="meta-container">
        <div class="headline">Some very very very long headline</div>
        <div class="description">Some description</div>
        <div class="description">Other stuff</div>
    </div>
</div>
<p>Next element</p>