css实现不同浏览器下兼容文本两端对齐
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
在 form 表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如:
比较粗暴的做法是在需要隔离边距的文本中加标签,然后分别控制每个文字的边距,这种方法比直接加空格或者占位符更精准,我之前也都是这么做的。但是写的多了之后开始思考能不能抽象出来用于更多的场景?让代码更好看一些?维护成本更低一些?
1、首先想到是能不能直接靠 css 解决问题
css
html
好吧,text-align:justify
完全无效,不甘心,于是用一段文本测试了下,效果如下:
原来这个属性是针对段落文本两端对齐的,接着试一下 text-align-last: justify
这个属性
css
效果是达到了,但缺点是完全不兼容 ie 和 safari 浏览器。
2、接着思考,既然上述实现存在兼容性问题,那么能不能为 2 个,3 个,4 个等这样长度的文本单独写 css 类解决,因为表单的文本框提示文字也不会很多。
css
html
这种方案看起来能够解决问题,应对大部分场景应该没问题了,但遗憾的是并不是真正的两端对齐,特殊显示的情况下还是无法满足需求,我们先放着,继续往下尝试。
2、以上是纯 css 实现方式,接下来我们看看 css 和 dom 结合能不能做出统一形式的解决方案。
html
css
1 2 3 4 5 6 7 | .test- justify { text-align : justify ; } span { display :inline- block ; padding-left : 100% ; } |
想想还有一些小激动呢,而且完美兼容 ie 和 safari,这种方案其实就是第一种段落对齐方案的扩展,用空格强制分词,然后用 span 伪造最后一行(test-justify 不会对最后一行进行对齐)。
为了增加扩展性,我们还得对这种方案进行优化,因为大多数情况下文本是后端加载的。
只要加一小段js然后就应该能兼容所有场景了。
css
1 2 3 4 5 6 7 8 9 10 11 | div { width : 300px ; border : 1px solid #000 ; } .test- justify { text-align : justify ; } span { display :inline- block ; padding-left : 100% ; } |
html
js
1 2 3 4 5 6 7 8 | 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
所以只考虑这两种浏览器的情况下调用最后一种方案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 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" }) } |
哈哈哈,完美!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了对常见的css属性进行浏览器兼容性总结(推荐)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-20
- 这篇文章主要介绍了CSS浏览器兼容性常见问题,ie各版本的浏览器的兼容情况做了详细介绍,开发中需要注意到的兼容性问题大家可以注意一下,具体操作步骤大家可查看下文的详2017-08-16
- 本篇文章主要介绍了CSS3与页面布局学习和总结——浏览器兼容与前端性能优化 ,具有一定的参考价值,有需要的可以了解一下。2022-09-29
- 下面小编就为大家带来一篇兼容主流浏览器的CSS透明代码(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-18
- 为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!2016-09-11
- 这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-07-05
- @supports可以用来检查浏览器是否支持某CSS属性,并且可以通过JavaScript进行控制,以下就来详细说明使用CSS的@supports标记来检测浏览器的兼容情况的方法2016-06-28
- 下面小编就为大家带来一篇关于老式浏览器兼容HTML5和CSS3的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-06-01
- 下面小编就为大家带来一篇CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-26
- 这篇文章主要帮助大家梳理主流浏览器css兼容的相关问题,对主流浏览器css兼容问题进行汇总,感兴趣的小伙伴们可以参考一下2016-03-15
最新评论