View Single Post
Old 09-27-2022, 05:32 PM   #2
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,369
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Not sure of ALL the ramifications, but have you tried using a margin-left, or padding-left, on the <ul>/<li> instead of text-indent??

I also added a little padding to the right and left of the spans to have a little bit of space between the dots and the letters.

Code:
<head>
  <title></title>

<style>
ul {margin:0; padding:0}
li {margin:0; padding-left:2em}

.dotleaderline	{
/* Turns a block into a flexbox so it can be "responsive" */
	display:	flex;
	flex-direction:	row;
	flex-wrap:	nowrap;
	justify-content:	center;
	align-items:	flex-end;

}
.dotleaderline span {padding:0 .25em}

.dotfiller	{
/* Stuck between two objects in a flexbox, will fill the gap with dots */
	flex-grow:	1;
	border-bottom:	0.1em dotted;
	min-width:	0;
    padding:0 1.5em
}

</style>
</head>

<body>
<ul class="ul_none">
<li class="dotleaderline"><span>first text</span><span class="dotfiller"/><span>last text</span></li>
<li class="dotleaderline"><span>another text</span><span class="dotfiller"/><span>even more last text</span></li>
</ul>
</body>
</html>
fyi: This seems to work in Sigil's Previewer, but will probably not work in all devices.
Turtle91 is offline   Reply With Quote