text-align justify en définissant letter-space [duplicate]
Nov 29 2020
dans l'exemple ci-dessous, est-il possible de définir l'espacement des lettres pour que les trois lignes soient automatiquement justifiées des deux côtés?
Je pense que cela est possible en utilisant javascript, mais je préfère une solution css uniquement
.logo{
position:absolute;
text-align:justify;
text-align-last:justify;
}<div class='logo'>LOREM IPSUM<br>DOLOR<br>SIT AMET</div>Réponses
1 John Nov 29 2020 at 09:11
Voici une solution 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>