how to justify text in multiple links vertically - html

Question

I need all the links below to be justified vertically, i.e. on left and right side.
font-size should be as is.
Obviously the only way is to adjust letter-spacing, but is it possible to do this automatically for all links inside .wrap.
a{display:block; text-decoration:none;}
.a1{font-size:0.7rem;}
.a2{font-size:1rem;}
.a3{font-size:1rem;}
.a4{font-size:0.7rem;}
<div class='wrap'>
<a href='index.php' class='a1'>LOREM IPSUM</a>
<a href='index.php' class='a2'>DOLOR SIT</a>
<a href='index.php' class='a3'>BLUE SKY</a>
<a href='index.php' class='a4'>DEEP OCEAN</a>
</div>

Answer 1

This is what I came up with. A bit "dirty" but it does exactly what you want. You may find ways to inprove the code as mine runs the same loop twice but I wrote this quickly. At least you'll get an idea.
First, set the display of a tags to inline-block to be able to measure the largest width of all. Once you have that maxWidth, loop through all elements, wrap each character in a span, and set the display of a tags to flex.
CSS:
a{
display: inline-block;
width: auto;
justify-content: space-between;
text-decoration:none;
clear: both;
}
a.flex{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.a1{font-size:0.7rem;}
.a2{font-size:1rem;}
.a3{font-size:1rem;}
.a4{font-size:0.7rem;}
a span{
display:inline-block;
}
JS:
var elements = document.querySelectorAll(".wrap > a");
var maxWidth = 0;
for (var i = elements.length - 1; i >= 0; i--) {
maxWidth = Math.max(maxWidth, elements[i].offsetWidth);
}
for (var i = elements.length - 1; i >= 0; i--) {
elements[i].classList.add("flex");
elements[i].style.width = maxWidth+ "px";
var text = elements[i].textContent;
text.split("");
elements[i].innerHTML = "";
for (var j = 0; j < text.length; j++) {
var span = document.createElement("span");
// Fix: issue reported by Chris L
// Replace space with non-breaking space HTML code
span.innerHTML = (text[j] === " ")? " " : text[j];
elements[i].appendChild(span);
}
}
Working example here: https://jsfiddle.net/nLdx923c/

Answer 2

One way to come at least close to what you want: use text-align-last: justify, a letter-spacing value in em (i.e. relative to the font-size) and a fixed width on the wrapper element, finding appropriate values by trial & error:
.wrap {
width: 95px;
}
a {
display: block;
text-decoration: none;
}
.a1 {
font-size: 0.7rem;
}
.a2 {
font-size: 1rem;
}
.a3 {
font-size: 1rem;
}
.a4 {
font-size: 0.7rem;
}
a {
text-align-last: justify;
letter-spacing: 0.08em;
}
<div class='wrap'>
<a href='index.php' class='a1'>LOREM IPSUM</a>
<a href='index.php' class='a2'>DOLOR SIT</a>
<a href='index.php' class='a3'>BLUE SKY</a>
<a href='index.php' class='a4'>DEEP OCEAN</a>
</div>