alinear texto justificar estableciendo espacio entre letras [duplicar]
Nov 29 2020
En el siguiente ejemplo, ¿es posible establecer el espaciado entre letras para que las tres líneas se justifiquen en ambos lados automáticamente?
Creo que esto es posible usando javascript, pero prefiero una solución solo css
.logo{
position:absolute;
text-align:justify;
text-align-last:justify;
}<div class='logo'>LOREM IPSUM<br>DOLOR<br>SIT AMET</div>Respuestas
1 John Nov 29 2020 at 09:11
Aquí 'una solución js:
function SplitText(node) {
var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");
for (var i = 0; i < text.length; i++) {
var letter = document.createElement("span");
letter.style.display = "inline-block";
letter.style.position = "absolute";
letter.appendChild(document.createTextNode(text.charAt(i)));
node.parentNode.insertBefore(letter, node);
var positionRatio = i / (text.length - 1);
var textWidth = letter.clientWidth;
var indent = 100 * positionRatio;
var offset = -textWidth * positionRatio;
letter.style.left = indent + "%";
letter.style.marginLeft = offset + "px";
//console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);
}
node.parentNode.removeChild(node);
}
function Justify() {
var TEXT_NODE = 3;
var elem = document.getElementById("character_justify");
elem = elem.firstChild;
while (elem) {
var nextElem = elem.nextSibling;
if (elem.nodeType == TEXT_NODE)
SplitText(elem);
elem = nextElem;
}
}#character_justify {
position: relative;
width: 20%;
margin: 0;
padding: 0;
}
#character_justify * {
margin: 0;
padding: 0;
border: none;
}<body onload="Justify()">
<p id="character_justify">
LOREM IPSUM<br>DOLOR<br>SIT AMET
</p>
</body>