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.