当前位置：首页 > Web前端 > HTML

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

时间：2023-04-02 19:41:18 HTML

在表单的前端布局中，我们经常需要对文本框的提示文字进行对齐，例如：比较粗暴的做法是给需要对齐的文字加上标签separatedfrommargin，然后分别控制每个文本的边距。这种方法比直接添加空格或占位符更准确。我以前做过这个。但是写了很多之后，我开始思考是否可以将它抽象出来，用在更多的场景中？让代码看起来更好？降低维护成本？1.首先想到的是直接css能不能解决问题css.test-justify{text-align:justify;}htmltesttext

嗯，text-align:justify是完全无效的，不甘心，于是用一段文字测试了一下，效果如下：原来这个属性是为了对齐段落文字的两端，然后试试text-align-last:justify这个属性css.test-justify{text-align:justify;}达到了效果，但是缺点是完全不兼容ie和safari浏览器。2、然后想一想，既然上面的实现有兼容性问题，能不能针对2、3、4文本等分别写CSS类，因为表单文本框的提示文本不会很多。cssdiv{width:100px;}.w2{letter-spacing:2em;}.w3{letter-spacing:0.5em;}htmltest

已测试

测试来了

这个方案参考自blog.csdn.net/muyutingfeng2008/article/details/48263073这个方案好像能解决问题，应该不行处理大多数场景的问题，但不幸的是它并没有真正对齐两端。在特殊显示的情况下，仍然不能满足需求。暂且搁置，继续尝试。2.以上是纯css实现。接下来看看css和dom结合能不能统一解决。html测试文本

css.test-justify{text-align:justify;}span{display:inline-block;padding-left:100%;}想想还是有些激动，完美兼容ie和safari。这个方案其实是第一个段落对齐方案的延伸，用空格强制分词，然后用span伪造最后一行（test-justify不会对齐最后一行）。为了增加可扩展性，我们必须优化这个解决方案，因为在大多数情况下文本是从后端加载的。比如.netcorerazor视图加载modeldisplayname加一小段js应该就可以兼容所有场景了。cssdiv{宽度：300px；border:1pxsolid#000;}.test-justify{text-align:justify;}span{display:inline-block;padding-left:100%;}html测试文本jsvar$this=$(".test-justify"),justifyText=$this.text().trim(),afterText="";for(vari=0;i";$this.html(afterText).css({"height":$this.height()/2+"px"});嗯，这个方案应该可以支持主流浏览器，但是缺点是是通过js重新调整的，所以刷新的时候仔细看一下对齐文本两端的过程（闪烁），体验不是很好，所以让我们让它兼容。只有IE和Safari不支持text-align-last:justify，所以只考虑这两个浏览器调用最后一个解决函数myBrowser(){varuserAgent=navigator.userAgent;//判断浏览器版本varisOpera=userAgent.indexOf("Opera")>-1;varisIE=userAgent.indexOf("compatible")>-1&&userAgent.indexOf("MSIE")>-1&&!isOpera;varisEdge=userAgent.toLowerCase().indexOf("edge")>-1&&!isIE;varisIE11=(userAgent.toLowerCase().indexOf("trident")>-1&&userAgent.indexOf("rv")>-1);if(/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)){返回"Firefox";}elseif(isIE){返回“IE”；}elseif(isEdge){返回"IE";}elseif(isIE11){返回“IE”；}elseif(/[Cc]chrome\/\d+/.test(userAgent)){return"Chrome";}elseif(/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)**[Ss]afari/.test(userAgent)){return"Safari"}else{return"未知”}}varbrowser=myBrowser();if(browser=="IE"||browser=="Safari"){var$this=$(".test-justify"),justifyText=$this.text().trim(),afterText="";for(vari=0;i";$this.html(afterText).css({"height":$this.height()/2+"px"})}哈哈哈哈，完美！我的公众号《捷义》

上一篇：(转)响应式和自适应的区别

下一篇：Willitfinally-关于try-catch的一些细节

兼容不同浏览器下的文本对齐相关文章

最新推荐

猜你喜欢