repeat character until right border Options

[CharliePrince]

Does anyone know how to . . . In this case, make the (=) character repeat until it meets the right border of the div container?

For example, if you did not know how long the string to the left of the (=) chars are or how many characters are left of the (=)

A way to pad the right side of the element's readable characters with (=) chars until they meet the right border

Below are examples of what I'm trying to do except I want to do something like repeat("=" (width - LeftText.Length)) using html and css

CODE

<div>Lorem ipsum dolor sit ==================================</div>

CODE

<div>Manufacturing Machine Automation =========================</div>

[pandy]

Take a look at this.
https://www.w3.org/Style/Examples/007/leaders.en.html
IIRC there are variations of this method, the key when googling is "dot leaders".

Applied to what you have it would go something like this. I put a border on the DIV just so we can see where it ends, it doesn't need to be there. The SPAN needs a little padding so the equal signs won't run up snug against it since the SPAN is really on top of the equal signs that cover the whole DIV, but are hidden by the background of the SPAN.

CODE

body        { background: white; color: black }
.foo        { width: 70%;
              border: 1px solid red;
              overflow-x: hidden }
.foo:before { float: left;
              width: 0;
              white-space: nowrap;
              content:
              "= = = = = = = = = = = = = = = = = = = = "
              "= = = = = = = = = = = = = = = = = = = = "
              "= = = = = = = = = = = = = = = = = = = = "
              "= = = = = = = = = = = = = = = = = = = = "
              "= = = = = = = = = = = = = = = = = = = = "
              "= = = = = = = = = = = = = = = = = = = = "
              "= = = = = = = = = = = = = = = = = = = = " }

.foo span   { background: white;
              padding-right: .5em }

HTML

<div class="foo"><span>Manufacturing Machine Automation</span></div>

[pandy]

BTW it would have been nice if Mr Bos had explained why the zero height and left float make the leaders go inside the DIV instead of before it. I never understood that part. I just accept that it does.

[CharliePrince]

Yes that would have been nice ha. I'm till looking at this, cannot get it to work with a div tag

[pandy]

Didn't what I posted above, with a DIV and equal signs, work for you?

[Christian J]

BTW it would have been nice if Mr Bos had explained why the zero height and left float make the leaders go inside the DIV instead of before it. I never understood that part. I just accept that it does.

If you give the generated float box a border, the latter shows up at the beginning of the DIV (I suppose the SPAN appears after it because the generated box is floated left). Due to the zero width, the box takes up no space and the "==="-characters spill out of it. Then the SPAN's background-color hides the characters behind the SPAN text.

[CharliePrince]

Didn't what I posted above, with a DIV and equal signs, work for you?

I only see (Manufacturing Machine Automation) in my browser. Hold on, let me try it again

[CharliePrince]

Didn't what I posted above, with a DIV and equal signs, work for you?

It's working now. Sorry about that I must have had a mix-up on my first try. Still looking at it

[pandy]

All is good then.

BTW it would have been nice if Mr Bos had explained why the zero height and left float make the leaders go inside the DIV instead of before it. I never understood that part. I just accept that it does.

If you give the generated float box a border, the latter shows up at the beginning of the DIV (I suppose the SPAN appears after it because the generated box is floated left). Due to the zero width, the box takes up no space and the "==="-characters spill out of it. Then the SPAN's background-color hides the characters behind the SPAN text.

You are right. I was confused yesterday night. When I played around with it to refresh my memory the equal signs at one point showed up before, really before, the DIV. On the line before, if you wish, above it. My sleep deprived brain thought right, that's how before works, it places its content before the element it's attached to. But of course it doesn't. It places it before that element's content, i.e. inside the DIV in this case. I actually don't know what I did when I got it (really) before the DIV.

So you're right. The float and zero width are just tricks to get the SPAN snug to the left. Last night that was what got it inside the DIV, for me. I must have had some fishy typo. I can't repeat what I had whatever I do now.

Alas, because that would be another neat trick, to get the xxxxx out of the box without positioning.

[Christian J]

Alas, because that would be another neat trick, to get the xxxxx out of the box without positioning.

I recall I got that effect last night while experimenting. Maybe by removing the float?

[pandy]

No. That was my mistake. That I thought that it was outside the box without the float and zero width. It isn't. And shouldn't be (I say when I've slept on it).

[Christian J]

It works!

CODE

p {
border: 1px solid red;
height: 1.2em;
}

p:after {
content: "Generated";
display: block;
border: 1px solid lime;
}

<p>Original</p>

(with ":before" the original content is pushed out of the P element, with ":after" the generated content is pushed out).

[pandy]

I guess that makes sense.

I haven't played much with this, more that for placing an icon at the end of a link and things like that.