Padd element with dots-CodePudding

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..........

CodePudding user response：

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.

CodePudding user response：

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>