문자 간격을 설정하여 텍스트 정렬 양쪽 맞춤 [중복]
Nov 29 2020
아래 예에서 세 줄 모두 자동으로 양쪽에 정렬되도록 문자 간격을 설정할 수 있습니까?
나는 이것이 자바 스크립트를 사용하여 가능하다고 생각하지만 CSS 전용 솔루션을 선호합니다.
.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>