代码之家 › 专栏 › 技术社区 › Gary

CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

flexbox css html

Gary · 技术社区 · 3 年前

在下面的代码段中,是否有一种方法可以填充 span 从单词“Paper”到行尾 . . . . . ? 我希望它能自动调整不同的查看端口宽度。

当保证所有分区都能放在一行时,在一个灵活的方框中使用三个分区,并用虚线边框底部灵活使用中间的分区,就非常容易了。但是,当段落可以换行到多行时,我不知道如何灵活地设置宽度跨度,只填充最后一行的剩余空间。

非常感谢。

div {
  display: flex;
  border: 0.1rem solid black;
  max-width: 300px;
  justify-content: space-between;
  align-items: end;
}

div > p:first-child {
  flex: 1 1;
}

div > p:last-child {
  flex: 0 0;
}

div > p > span {
  margin-left: 1.0rem;
}

<div>
  <p>This is a long title that spans two lines in the container.<span>Paper</span><p>
  <p>.75</p>
</div>

1 回复 | 直到 3 年前

Temani Afif 3 年前

您可以尝试以下操作:

div {
  display: flex;
  border: 0.1rem solid black;
  max-width: 300px;
  justify-content: space-between;
  align-items: end;
}

div > p:first-child {
  flex: 1 1;
  overflow:hidden; /* hide the overflow */
}

div > p:last-child {
  flex: 0 0;
}

div > p > span {
  margin-left: 1.0rem;
  position: relative; /* relative to span */
}
div > p > span:before {
  --d: ". . . . . . . . ";
  content: var(--d) var(--d) var(--d) var(--d) var(--d);
  position: absolute;
  left: 100%; /* start at the right */
  bottom: 0; /* control the bottom offset */
  width: 100vw; /* a very big width */
}

<div>
  <p>This is a long title that spans two lines in the container.<span>Paper</span><p>
  <p>.75</p>
</div>

<div style="max-width:500px;">
  <p>This is a long title that spans two lines in the container.<span>Paper</span><p>
  <p>.75</p>
</div>

<div style="max-width:200px;">
  <p>This is a long title that spans two lines in the container.<span>Paper</span><p>
  <p>.75</p>
</div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前