专栏首页有刻不同浏览器下兼容文本两端对齐

不同浏览器下兼容文本两端对齐

在 form 表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如:

比较粗暴的做法是在需要隔离边距的文本中加标签,然后分别控制每个文字的边距,这种方法比直接加空格或者占位符更精准,我之前也都是这么做的。但是写的多了之后开始思考能不能抽象出来用于更多的场景?让代码更好看一些?维护成本更低一些?


1、首先想到是能不能直接靠 css 解决问题

css

.test-justify {
    text-align: justify;
}

html

 <div class="test-justify">
        测试文本
 </div>

好吧,text-align:justify 完全无效,不甘心,于是用一段文本测试了下,效果如下:

原来这个属性是针对段落文本两端对齐的,接着试一下 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>

此方案参考自blog.csdn.net/muyutingfeng2008/article/details/48263073

这种方案看起来能够解决问题,应对大部分场景应该没问题了,但遗憾的是并不是真正的两端对齐,特殊显示的情况下还是无法满足需求,我们先放着,继续往下尝试。

2、以上是纯 css 实现方式,接下来我们看看 css 和 dom 结合能不能做出统一形式的解决方案。

html

<div class="test-justify">
    测 试 文 本
    <span></span>
</div>

css

.test-justify {
    text-align: justify;
}
span {
    display:inline-block;
    padding-left:100%;
}

想想还有一些小激动呢,而且完美兼容 ie 和 safari,这种方案其实就是第一种段落对齐方案的扩展,用空格强制分词,然后用 span 伪造最后一行(test-justify 不会对最后一行进行对齐)。

为了增加扩展性,我们还得对这种方案进行优化,因为大多数情况下文本是后端加载的。

例如 .net core razor 视图加载 model displayname 的写法
<label asp-for="Email"></label>

只要加一小段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再调整的,所以刷新的时候仔细看会看到文本两端对齐的过程(闪一下),体验并不是很好,那就做一下兼容吧。 只有 IE 和 Safari 不支持 text-align-last: justify 所以只考虑这两种浏览器的情况下调用最后一种方案

function myBrowser() {
    var userAgent = navigator.userAgent;

    //判断浏览器版本  
    var isOpera = userAgent.indexOf("Opera") > -1; 
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; 
    var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; 
    var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1);

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

哈哈哈,完美!

第一次写博客,点个赞呗,要是有更好的解决方案,欢迎留言~~~


补充:因为空格增加了字间距,为了达到最佳呈现效果可以随意增加一个极限的单词边距 word-spacing: -10px

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mac 小记 — 杂录

    捷义
  • React 系列 - 写出优雅的路由

    自前端框架风靡以来,路由一词在前端的热度与日俱增,他是几乎所有前端框架的核心功能点。不同于后端,前端的路由往往需要表达更多的业务功能,例如与菜单耦合、与标题耦合...

    捷义
  • Nginx 原理解析和配置摘要

    捷义
  • 网站纯CSS全屏loading特效(由中间向两边散开)

    网页特效预览 ? 预览2:gif图片动的有点快 ? 将代码放在head.php【顶部文件里】 css新建一个css文件 把以下代码放在...

    奶糖味的代言
  • Theano调试技巧

    Theano是最老牌的深度学习库之一。它灵活的特点使其非常适合学术研究和快速实验,但是它难以调试的问题也遭到过无数吐槽。其实Theano本身提供了很多辅助调试的...

    用户1332428
  • 映射真实世界后,百度地图开始用人工智能优化这个世界

    今天,百度地图与北京交管局有一个很有意思的战略合作,这将直接影响北京市民的出行:百度地图为北京交警量身打造了一个城市灯控路口路况监测平台——百度地图智慧信号灯研...

    罗超频道
  • Python基础-迭代器与生成器

    迭代器对象要求支持迭代器协议的对象,在 python 中,支持迭代器协议就是实现对象的 __iter__() 和 __next__() 方法。

    小团子
  • 【每周论文推荐】 初入深度学习CV领域必读的几篇文章

    很多朋友都希望我们开通论文推荐和阅读板块,那就开吧,此专栏名为《每周论文推荐》。在这个专栏里,还是本着有三AI一贯的原则,专注于让大家能够系统性完成学习,所以我...

    用户1508658
  • ghost博客部署

    ghost是基于nodejs构建的开源博客平台 网上有很多部署ghost博客的文章,包括ghost中文网,部署的方法很多,但是我觉得最方便的就是用ghost_...

    bboysoul
  • golang Flow流程添加时间轴

    element table的在线编辑组件extends更新很快,前面还存在不能刷新页面数据的bug,到现在已经好了,并且安装的使用都变得简单了,不需要vuex,...

    hotqin888

扫码关注云+社区

领取腾讯云代金券