css完成不一样访问器下适配文字两边对齐

日期:2021-01-20 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

在 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" })
}

哈哈哈,完善!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。