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

最新推荐文章于 2025-05-14 17:39:51 发布

weixin_34290096

最新推荐文章于 2025-05-14 17:39:51 发布

阅读量960

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000013146385

本文介绍了一种在不同浏览器及移动端实现文本两端对齐的方法，包括使用text-align-last、添加空标签、text-justify属性及在文字间添加空格等方式，并提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

代码如下：

.h_text{
    text-align: justify;
    width: 200px;
} 
<h1 class="h_text">这一行要两端对齐</h1>

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

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

解决办法有以下几个：

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

.h_text{
    text-align-last: justify; 
    width: 200px;
}
<h1 class="h_text">这一行要两端对齐</h1>

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

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

.h_text{
    text-align: justify; 
    width: 200px;
}
.span_hid{
    display: inline-block;
    width: 100%;
    opacity: 0;
}
 
<h1 class="h_text">
    这一行要两端对齐
    <span class="span_hid">隐藏的一段代码</span>
</h1>

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

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

.h_text{
    text-align: justify; 
    width: 200px;
}
.span_hid{
    display: inline-block; 
    width: 100%;
}
 
<h1 class="h_text">
    这一行要两端对齐
    <span class="p_hid"></span>
</h1>

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

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

.h_text{
    text-align: justify; 
    text-justify: inter-ideograph;
    width: 200px;
} 
.span_hid{ 
    display: inline-block; 
    width: 100%;
}
 
<h1 class="h_text">
    这一行要两端对齐
    <span class="span_hid"></span>
</h1>

完美解决了对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%;
}
 
<h1 class="h_text">
    这 一 行 要 两 端 对 齐
    <span class="span_hid"></span>
</h1>

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

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

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

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