资讯专栏INFORMATION COLUMN

如何解决text-align: justify;浏览器、安卓手机不兼容问题

techstay / 2335人阅读

摘要:下载安装的浏览器等也没有问题。但是用安卓手机再带的浏览器,问题就出现了。经过查询找到一个问题。于是给每个文字之间添加了一个空格,成功解决了各浏览器不兼容手机端不兼容的问题。

今天需要切一个响应式网页,有一行文字,需要实现两端对齐。

代码如下:

.h_text{
    text-align: justify;
    width: 200px;
} 

这一行要两端对齐

根据经验找到text-align:justify;首先用PC端浏览器测试,刷新网页没起作用。

在网上搜寻,发现“只有一行文字或者最后一行文字,是没效果的,默认靠左对齐”。

解决办法有以下几个:

1、使用“text-align-last:justify;”意思是告诉电脑,“这是最后一行代码,也给我两端对齐了”

.h_text{
    text-align-last: justify; 
    width: 200px;
}

这一行要两端对齐

但text-align-last并不是所有浏览器都兼容。

2、在文字后边加一行,然后给隐藏了

.h_text{
    text-align: justify; 
    width: 200px;
}
.span_hid{
    display: inline-block;
    width: 100%;
    opacity: 0;
}
 

这一行要两端对齐 隐藏的一段代码

隐藏后文本还是会占位置,影响布局效果不好,而且这么low的行为,不符合一个工程师的身份。

3、在文字后边加一个空标签

.h_text{
    text-align: justify; 
    width: 200px;
}
.span_hid{
    display: inline-block; 
    width: 100%;
}
 

这一行要两端对齐

嗯,这样就好多了,但是对IE浏览器还是有些问题。

4、这时需要添加“text-justify:inter-ideograph;”大意就是,增加或减少词间的空格

.h_text{
    text-align: justify; 
    text-justify: inter-ideograph;
    width: 200px;
} 
.span_hid{ 
    display: inline-block; 
    width: 100%;
}
 

这一行要两端对齐

完美解决了对IE浏览器的兼容。

如果只兼容PC端浏览器,就已经解决了。

But,还要兼容手机浏览器。

QQ、微信软件内打开网页,没问题。下载安装的浏览器:QQ、UC等也没有问题。iPhone手机自带浏览器也没有问题。
但是用安卓手机再带的浏览器,问题就出现了。完美的向左靠齐,怎么搞就是没效果。

于是又重新走了一遍1-4的流程。结果并没什么用。

经过查询找到一个问题。text-align-last,safari 不支持的解决办法

文章中提到:IE浏览器中需要文字间添加空格。那么安卓浏览器会不会也这样。

5、于是给每个文字之间添加了一个空格,成功解决了各浏览器不兼容、手机端不兼容的问题。

.h_text{ 
    text-align: justify;
    text-justify: inter-ideograph;
    width: 200px;
} 
.span_hid{ 
    display: inline-block;
    width: 100%;
}
 

这 一 行 要 两 端 对 齐

当然文字少是没啥问题,但是文字比较多的话,需要一些JS代码给文字之间加空格。

var text= "这一行要两端对齐";
var result = text.split("").join(" ");

至于添加after伪类,更加简洁一些。没有应用。

项目实例:中国银河证券APP,以供参考。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51822.html

相关文章

  • 如何解决text-align: justify;览器安卓手机兼容问题

    摘要:下载安装的浏览器等也没有问题。但是用安卓手机再带的浏览器,问题就出现了。经过查询找到一个问题。于是给每个文字之间添加了一个空格,成功解决了各浏览器不兼容手机端不兼容的问题。 今天需要切一个响应式网页,有一行文字,需要实现两端对齐。 代码如下: .h_text{ text-align: justify; width: 200px; } 这一行要两端对齐 根据经验找到t...

    Bamboy 评论0 收藏0
  • 移动端总结

    摘要:移动端的字体最开始的的方案是升级后的方案以前版本降级使用。在处理移动端边框的时候有两种方案,其中一种方案就是将还有一种方案就是通过伪类来处理。固定项栏页面基本上市面上所看到的移动端的页面都是固定头部和底部,少量的会加入侧边工具栏。 1、移动端的字体 最开始的的方案是: body { font-family: Helvetica Neue, Helvetica, microsoft...

    leo108 评论0 收藏0
  • 移动端总结

    摘要:移动端的字体最开始的的方案是升级后的方案以前版本降级使用。在处理移动端边框的时候有两种方案,其中一种方案就是将还有一种方案就是通过伪类来处理。固定项栏页面基本上市面上所看到的移动端的页面都是固定头部和底部,少量的会加入侧边工具栏。 1、移动端的字体 最开始的的方案是: body { font-family: Helvetica Neue, Helvetica, microsoft...

    frank_fun 评论0 收藏0
  • 移动端总结

    摘要:移动端的字体最开始的的方案是升级后的方案以前版本降级使用。在处理移动端边框的时候有两种方案,其中一种方案就是将还有一种方案就是通过伪类来处理。固定项栏页面基本上市面上所看到的移动端的页面都是固定头部和底部,少量的会加入侧边工具栏。 1、移动端的字体 最开始的的方案是: body { font-family: Helvetica Neue, Helvetica, microsoft...

    cjie 评论0 收藏0

发表评论

0条评论

techstay

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<