CSS method of filling remainder of paragraph with string of periods in a flex box layout?-CodePudding

In the following snippet, is there a method of filling the remainder of the span from the word "Paper" up to the end of the row with . . . . .? I'd like it to automatically adjust for different view port widths.

When it was guaranteed that all fit on one row, it was pretty easy to use three division within a flex box and flex the middle div with a dashed border bottom. But when the paragraph can wrap to multiple lines, I don't see how to make flexible width span to fill the remaining space of the last row only.

Thank you.

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>

CodePudding user response：

You can try like below:

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>