Question

我的问题不是那么具体，所以我可以不用例子问它，所以这是我的情况：假设我有一个书籍列表，我在父div中显示，有维度。列表可能比父div更大，但如果是，则有滚动条。 Book有它的标题和一些带有服务器端定义宽度的可选规范。

我需要的是，书籍规格会拉伸内部容器，但标题不会，用省略号剪切。

我只能用一些js来做，感觉很蹩脚，所以请问，有没有办法只用css制作它？

<div id="outer">
  <div id="inner">
    <div class="book">
      <div class="title">The Persecution and Assassination of Jean-Paul Marat as Performed by the Inmates of the Asylum of Charenton Under the Direction of the Marquis de Sade</div>
      <div class="attrs">
        <div class="item" style="width:200px">Author: Peter Weiss</div>
        <div class="item" style="width:200px">Rating: 4.03</div>
        <div class="item" style="width:300px">Published December 1st 2001 by Waveland Pr Inc (first published 1963)</div>
      </div>
    </div>
    <div class="book">
      <div class="title">1984</div>
      <div class="attrs">
        <div class="item" style="width:200px">Author: George Orwell</div>
        <div class="item" style="width:200px">Rating: 4.15</div>
      </div>
    </div>
  </div>
</div>

以下是用于说明的笔：https://codepen.io/Masquer/pen/rdwJzQ

Answer 1

实际问题比你的代码指示要简单得多，但它如下：
#inner容器的宽度应由其内容（不包括标题）确定，标题仅与容器一样宽。无论内容的宽度如何。就是这样。

所以解决方案很简单：不要让标题计算宽度。换句话说，请给出标题position: absolute。

#inner {
  background:#bbb;
  display:inline-block;
}

.title {
  background:#ddd;
  height:30px; margin:1em;
  position:relative;
}

.title > span {
  position:absolute;
  width:100%; line-height:30px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contents {
  background:#ddd;
  margin:1em;
}
.contents img {
  vertical-align:top;
}

<div id="inner">
 <div class="title">
  <span>A very, very, very, very, very, very, very, very, very, very, very, very, very, very long title</span>
 </div>
 <div class="contents">
  <img src="https://placehold.it/400x100" alt="400x100">
 </div>
</div>

在这个例子中，我从不在任何地方设置像素的宽度，因此它与内部的图片一样宽，忽略了标题的宽度。（您可以使用不同的图片或文本，它将调整为新的宽度。）

我花了一些时间才找到解决方案，但是你的例子的结构首先把我推向错误的方向。抱歉。例如，#outer容器不是证明问题所必需的。如果需要，可以在此代码周围放置一个外部容器。

Answer 2

如果你使用白色空间：nowrap;它会做你的工作。

 .title {
  box-sizing: border-box;
  padding: 10px;
  background-color: #ddd;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

如果您需要＆＃34; ...＆＃34;最后你需要描述该行的最大宽度，因此溢出将是省略号。

.title {
  box-sizing: border-box;
  padding: 10px;
  background-color: #ddd;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width:800px;

}

有没有办法拉伸父div？

2 个答案: