在 form 表单的前端开发合理布局中，大家常常必须将文字框的提醒文字两边对齐，比如：
较为粗鲁的做法是在必须防护边距的文字中加标识，随后各自操纵每一个文本的边距，这类方式比立即加空格或占位符更精确，我以前也全是这么做的。可是写的多了以后刚开始思索能不可以抽象性出来用于更多的情景？让编码更漂亮1些？维护保养成本费更低1些？
1、最先想起是能不可以立即靠 css 处理难题
css
.test-justify {
text-align: justify;
}
html
<div class="test-justify">
检测文字
</div>
好吧，text-align:justify 彻底失效，不甘愿，因而用1段文字检测了下，实际效果以下：
原先这个特性是对于段落文字两边对齐的，接着试1下 text-align-last: justify 这个特性
css
.test-justify {
text-align: justify;
}
实际效果是做到了，但缺陷是彻底兼容问题 ie 和 safari 访问器。
2、接着思索，既然上述完成存在适配性难题，那末能不可以为 2 个，3 个，4 个等这样长度的文字独立写 css 类处理，由于表单的文字框提醒文本也不容易许多。
css
div {
width: 100px;
}
.w2 {
letter-spacing: 2em;
}
.w3 {
letter-spacing: 0.5em;
}
html
<div class="w2">检测</div> <div class="w3">检测了</div> <div>检测来了</div>
这类计划方案看起来可以处理难题，解决绝大多数情景应当没难题了，但遗憾的是其实不是真实的两边对齐，独特显示信息的状况下還是没法考虑要求，大家先放着，再次往下尝试。
2、以上是纯 css 完成方法，接下来大家看看 css 和 dom 融合能不可以做出统1方式的处理计划方案。
html
<div class="test-justify">
测 试 文 本
<span></span>
</div>
css
.test-justify {
text-align: justify;
}
span {
display:inline-block;
padding-left:100%;
}
想一想也有1些小兴奋呢，并且完善适配 ie 和 safari，这类计划方案实际上便是第1种段落对齐计划方案的拓展，用空格强制性分词，随后用 span 仿冒最终1行（test-justify 不容易对最终1行驶行对齐）。
以便提升拓展性，大家还得对这类计划方案开展提升，由于大多数数状况下文字是后端开发载入的。
比如 .net core razor 主视图载入 model displayname 的写法 <label asp-for="Email"></label>
要是加1小段js随后就应当能适配全部情景了。
css
div {
width: 300px;
border: 1px solid #000;
}
.test-justify {
text-align: justify;
}
span {
display:inline-block;
padding-left:100%;
}
html
<div class="test-justify">
检测文字
</div>
js
var $this = $(".test-justify")
, justifyText = $this.text().trim()
, afterText = "";
for (var i = 0; i < justifyText.length; i++) {
afterText += justifyText[i] + " ";
}
afterText = afterText.trim() + "<span></span>";
$this.html(afterText).css({ "height": $this.height() / 2 + "px" });
好了，这类计划方案应当能适用流行的访问器了，但缺陷是因为根据js再调剂的，因此更新的情况下细心看会看到文字两边对齐的全过程（闪1下），体验其实不是很好，那就做1下适配吧。
仅有 IE 和 Safari 不适用 text-align-last: justify 因此只考虑到这两种访问器的状况下启用最终1种计划方案
function myBrowser() {
var userAgent = navigator.userAgent;
//分辨访问器版本号
var isOpera = userAgent.indexOf("Opera") > ⑴;
var isIE = userAgent.indexOf("compatible") > ⑴ && userAgent.indexOf("MSIE") > ⑴ && !isOpera;
var isEdge = userAgent.toLowerCase().indexOf("edge") > ⑴ && !isIE;
var isIE11 = (userAgent.toLowerCase().indexOf("trident") > ⑴ && userAgent.indexOf("rv") > ⑴);
if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) {
return "Firefox";
} else if (isIE) {
return "IE";
} else if (isEdge) {
return "IE";
} else if (isIE11) {
return "IE";
} else if (/[Cc]hrome\/\d+/.test(userAgent)) {
return "Chrome";
} else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {
return "Safari"
} else {
return "unknown"
}
}
var browser = myBrowser();
if (browser == "IE" || browser == "Safari") {
var $this = $(".test-justify")
, justifyText = $this.text().trim()
, afterText = "";
for (var i = 0; i < justifyText.length; i++) {
afterText += justifyText[i] + " ";
}
afterText = afterText.trim() + "<span></span>";
$this.html(afterText).css({ "height": $this.height() / 2 + "px" })
}
哈哈哈，完善！
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 自助建站_专业建站_建站网站_建站平台_网站在线制作app 版权所有 （网站地图） 粤ICP备10235580号