使一个元素的宽度依赖于其兄弟元素的宽度

Question

使一个元素的宽度依赖于其兄弟元素的宽度

3

我正在制作一个小部件，使得副标题的长度永远不会超过标题。因此，标题将控制小部件的宽度，如果副标题变得比标题宽，则副标题将换行。如果可能，我希望在没有JavaScript的情况下完成。

我已经接近成功了（请参见下面的片段）。我能够人为地缩短副标题，但即使在这种情况下，由于某种原因，其所在的行也扩展到适合容器的整个空间，而不仅仅是其子元素使用的空间！事实上，它占用的空间恰好与没有换行时相同。

#container {
  background: #DDD; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.row {
  display: flex;
}

#subtitle {
  flex-basis: 0;
}

<div id="container">
  <div class="row">
    <h1 id="title">Title that is fairly long</h1>
  </div>
  <div class="row">
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3>
  </div>        
</div>

我需要将字幕保持在流动状态（不使用position:absolute），如果标题过长需要自动换行（这样就不会溢出页面）。是否有一种方法可以让两行文本，其中一行始终与另一行长度相同？

- Skitterm

在我的情况下，固定宽度的容器不是一个选项——小部件需要具有动态宽度（基于标题）。 - Skitterm

2个回答

-1

您已经将white-space: nowrap;添加到h1标签中，这使得它具有了完整的宽度

请在这里检查fiddle答案

- jafarbtech

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ouroborus · Accepted Answer

听起来像是CSS表格：

#container {
  background: #DDD; 
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.row > * {
  display: table-cell;
}
.row:after {
  content: " ";
  display: table-cell;
}
#title {
  width: 1px;
  white-space: nowrap;
}

<div id="container">
  <div class="row">
    <h1 id="title">Title that is fairly long</h1>
  </div>
  <div class="row">
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3>
  </div>        
</div>

在标题上使用width:1px会导致该列折叠。 white-space:nowrap防止标题换行。由于它使用表格布局，因此这种组合会导致列的宽度由标题确定，因此副标题也随之而来。:after为我们提供了一个灵活的列来填充表格。

（一旦CSS Grid可用，可能更可取。）

您提到了长标题。对于这种情况，您需要切换到JavaScript。（下面的JavaScript需要放置在受影响的部分之后或在页面加载时运行。）

var title = document.getElementById('title'),
    subtitle = document.getElementById('subtitle'),
    subtitleResize = function() {
      subtitle.style.width = title.clientWidth + 'px';
    };
window.addEventListener('resize', subtitleResize, false);
subtitleResize();

#container {
  background: #DDD; 
}

#title {
  display:inline-block;
}

<div id="container">
  <div class="row">
    <h1 id="title">Title that is fairly long</h1>
  </div>
  <div class="row">
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3>
  </div>        
</div>