repeat character until right border |
repeat character until right border |
CharliePrince |
Nov 8 2020, 05:04 PM
Post
#1
|
Novice Group: Members Posts: 24 Joined: 7-November 20 From: Saint Louis, MO Member No.: 27,623 |
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 |
Nov 8 2020, 05:27 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Nov 8 2020, 05:42 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Nov 8 2020, 07:14 PM
Post
#4
|
Novice Group: Members Posts: 24 Joined: 7-November 20 From: Saint Louis, MO Member No.: 27,623 |
Yes that would have been nice ha. I'm till looking at this, cannot get it to work with a div tag
|
pandy |
Nov 8 2020, 07:19 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Didn't what I posted above, with a DIV and equal signs, work for you?
|
Christian J |
Nov 8 2020, 07:29 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Nov 8 2020, 07:36 PM
Post
#7
|
Novice Group: Members Posts: 24 Joined: 7-November 20 From: Saint Louis, MO Member No.: 27,623 |
|
CharliePrince |
Nov 8 2020, 07:41 PM
Post
#8
|
Novice Group: Members Posts: 24 Joined: 7-November 20 From: Saint Louis, MO Member No.: 27,623 |
|
pandy |
Nov 9 2020, 05:08 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Nov 9 2020, 07:49 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Nov 9 2020, 07:54 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Nov 9 2020, 01:20 PM
Post
#12
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Nov 10 2020, 04:37 PM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. |
Lo-Fi Version | Time is now: 24th April 2024 - 08:51 PM |