अक्षर-स्थान सेट करके टेक्स्ट-संरेखित करें [डुप्लिकेट]
Nov 29 2020
नीचे दिए गए उदाहरण में, पत्र रिक्ति सेट करना संभव है, इसलिए सभी तीन पंक्तियों को स्वचालित रूप से दोनों पक्षों पर सही ठहराया जाता है?
मेरा मानना है कि जावास्क्रिप्ट का उपयोग करना संभव है, लेकिन मैं केवल समाधान के लिए सीएसएस पसंद करता हूं
.logo{
position:absolute;
text-align:justify;
text-align-last:justify;
}<div class='logo'>LOREM IPSUM<br>DOLOR<br>SIT AMET</div>जवाब
1 John Nov 29 2020 at 09:11
यहाँ एक 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>