中文或英文两端对齐的实现实例页面

回到相关文章 »

代码：

CSS代码：
.test_box {
    width: 300px;
    padding: 10px;
    background-color: #e0e0e0;
    font-family: 'microsoft yahei';
    font-size: 14px;
}
HTML代码：
<div id="testBox" class="test_box">
    为了最大化组件的品质，组件的实现要讲求分工...主次。
</div>
<p><button id="testBtn">对齐变身</button></p>
JS代码：
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.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " &nbsp; ");
    };
}

效果：

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