alinhamento de texto justificar definindo espaço entre letras [duplicado]
Nov 29 2020
no exemplo abaixo, é possível definir o espaçamento das letras para que todas as três linhas sejam justificadas em ambos os lados automaticamente?
Acredito que isso seja possível usando javascript, mas prefiro uma solução apenas com css
.logo{
position:absolute;
text-align:justify;
text-align-last:justify;
}<div class='logo'>LOREM IPSUM<br>DOLOR<br>SIT AMET</div>Respostas
1 John Nov 29 2020 at 09:11
Aqui está uma solução 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>O que significa um erro “Não é possível encontrar o símbolo” ou “Não é possível resolver o símbolo”?
George Harrison ficou chateado por suas letras de 'Hurdy Gurdy Man' de Donovan não terem sido usadas