Padd element with dots

Question

I have a inline-block element with fixed with but variable content. I want to pad the element with dots until 100% width. Think of overflow: ellispis but reversed.

span {
dislay: inline-block;
width: 6.27in;
/* something here to pad with dot? */
}

span:after { /* or here perhaps? */ }

<span>John Doe</span>
<span>Lorem Ipsum</span>
<span>Hello world</span>
<span>Test</span>

Should render

John Doe......
Lorem Ipsum...
Hello World...
Test..........

Here's some background reading that may serve you well: [Responsive TOC leader lines with CSS](https://markentier.tech/posts/2021/03/responsive-toc-leader-lines-with-css/) — Rene van der Lende, Jul 04 '22 at 12:19
@Pochen has the linked question in the closed message solved your problem because it seems to me it was talking about ellipsis not about filling a full remaining space with dots. — A Haworth, Jul 04 '22 at 12:32
@AHaworth, hi! My first reaction was `ellipsis` too, but OP mentioned *I want to pad the element with dots until 100% width*. — Rene van der Lende, Jul 04 '22 at 13:21
Have a look here - similar question: https://stackoverflow.com/a/41905228/5641669 — Johannes, Jul 04 '22 at 13:38
I'd go for the solution @Johannes mentioned above as with a `border` you can use `border-image` to use anything for a filling leader line. — Rene van der Lende, Jul 04 '22 at 14:35

score 1 · Accepted Answer · answered Jul 04 '22 at 13:51

1

You can do it like below:

span {
  display: inline-block;
  white-space:nowrap;
  overflow:hidden;
  width: 6.27in;
}

span:after {
  --d:".......................................";
  --_d: var(--d) var(--d);
  content: var(--_d) var(--_d) var(--_d) var(--_d);
}

<span>John Doe</span>
<span>Lorem Ipsum</span>
<span>Hello world</span>
<span>Test</span>

answered Jul 04 '22 at 13:51

Temani Afif

245,468
26
309
415

This works great, do vare to explain in easy terms what is does? I have never seen var before – Pochen Jul 05 '22 at 04:22
@Pochen those are CSS variables. They are not needed for the trick but I am using them to shorten the code and avoid repeating the dots a lot of times – Temani Afif Jul 05 '22 at 08:16

score 0 · Answer 2 · answered Jul 04 '22 at 13:39

There are a few ways this can be done.

The most straightforward, which may be enough in your case, is to have line of dots put in at the bottom of each line of text as a repeating background pattern and then hide the bit that goes beneath the actual text by giving the text a background color.

Here's an example snippet:

div {
  width: 6.27in;
  position: relative;
  background-image: radial-gradient(circle, black 0 30%, transparent 30% 100%);
  background-size: 8px 8px;
  background-position: left bottom;
  background-repeat: repeat no-repeat;
}

span {
  background: white;
  padding-right: 0.25em;
}

<div><span>John Doe</span></div>
<div><span>Lorem Ipsum</span></div>
<div><span>Hello world</span></div>
<div><span>Test</span></div>

Note that the original spans have been replaced by divs as your example in the question shows them one under the other.

You could use an alternative method, an after pseudo element with 100% width (and the parent with overflow-x hidden) and the same sort of dotted background. In this case though the dots don't necessarily line up.

Padd element with dots

2 Answers2