Question

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

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

我找到了缩短标题的方法，例如：http://jsfiddle.net/h0452569/ ，但因此我需要限制图像旁边的容器宽度。我尝试使用下面的代码，但我无法找到一种方法用CSS动态限制div宽度不扩展容器的div！

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

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>

Answer 2

为了打破单词，在你的.headline类中使用“word-wrap：break-word”，你还需要设置一个宽度（以px为单位）。例如：

.headline{
width:100px;
word-wrap: break-word;
}

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

2 个答案: