中文或英文两端对齐

by hezhi

HTML

<div id="testBox" class="test_box">
为了最大化组件的品质，组件的实现要讲求分工；要想分工，需将组件UI层东西从JS剥离出来，发挥CSS/HTML工程师的在UI处理上造诣；想要剥离，就要求组件半封装，避开大而全的API；所谓半封装是功能封装，UI不封装；但对于某一具体项目，组件还是完全封装的；避开API方法包括交给原生的HTML属性API,以及根据项目UI场景设计API，告别无意义的生僻场景API的使用。发挥CSS的潜力，尽量避免使用JS做一些自己为是的功能；UI组件的本质是HTML和CSS,JS只是辅助，千万不要乱了主次。
</div>
<p><button id="testBtn">对齐变身</button></p>

CSS

.test_box {
    width: 300px;
    padding: 10px;
    background-color: #e0e0e0;
    font-family: 'microsoft yahei';
    font-size: 14px;
}

JavaScript

var btn = document.getElementById("testBtn"),
    box = document.getElementById("testBox");
	
if (btn && box) {
    btn.onclick = function() {
        box.style.textAlign = "justify";
        box.style.letterSpacing = '-.15em';
        box.innerHTML = box.innerHTML.split("").join(" ");
    };
}