文本两端对齐：text-align: justify，当只有一行时不起作用的解决方法

原创 已于 2022-05-05 14:25:09 修改 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

于 2019-07-09 18:24:21 首次发布
博客指出text-align:justify不处理块内最后一行文本，单行时也无效。给出解决方法，用text-align-last:justify单独设置最后一行，结合text-align:justify可解决动态文本对齐问题。还拓展了用空标签占位实现最后一行两端对齐的方法。

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

问题：text-align:justify 不处理块内的最后一行文本，当仅有一行文本，也不起效果

解决方法：
text-align-last：justify 可以单独设置最后一行，结合text-align：justify就可以解决动态文本不确定是多行还是单行的问题

拓展：只让最后一行两端对齐，还可以使用空标签，width100%占位第一行，注意样式问题

h5开发 / 移动端不兼容text-align: justify的解决方法
学习笔记
11-18 1165
最近做移动开发，需要做如下效果，信心满满的使用text-align: justify发现居然无效！！！！ 最后在网上找到了解决方法： <!-- 每个字之间都加个空格 --> <!-- 后面加一个span标签是因为，只有一行的话，text-align-last是不起作用的 --> <div class="desc"> 邀 请 新 用 户，领 取 更 多 红 包 哦！ <span class="span_hid"></span> </div
text-align-last: justify；文本对齐ios失效问题解决
qq_44417271的博客
11-09 3531
用伪元素解决 text{ width: 16%; margin-right: 10rpx; display: inline-block; text-align: justify; text-align-last: center; &:after { content: ''; width: 100%; height: 0; display: inline-block; visibility: hidden; } }
text-algin:justify实现文本两端对齐方法小结
09-24
最近在写页面的时候遇到了一个问题—当行文本双端对齐，大家都知道CSS属性中有一个“text-align:justify”，但是这个属性使用的时候，要求还是挺多的，尤其是要实现单行文本双端对齐。这篇文章就给大家分享了text-algin:justify实现文本两端对齐的方法。
【css样式】text-align: justify两端对齐失效
流萤梦的博客
05-27 4115
看到这篇文章就知道，我已经踩坑了，hhh，分享一下解决方案： text-align的属性，它控制的是行内内容如何相对它的父级元素对齐。 关于text-align的其他取值这里就不再赘述了，主要说一下两端对齐的justify。 需要注意的是text-align: justify对最后一行无效！！！ 既然是最后一行不生效，那解决方案很显然也是从最后一行入手咯！ 这里先放一个简单的例子： <div> <span>这是一个测试例子这是一个测试例子这是一个测试例子这是一个
CSS中text-align: justify文本两端对齐
最新发布
BillKu的博客
06-06 828
* 强制最后一行两端对齐 *//* 需要固定宽度 */text-align: justify;/* 关键属性 *//* 自动在单词内添加换行连字符 */⚠️ 避免在窄容器中使用（如手机屏幕），过大的单词间距会降低可读性。（如文章、新闻），能创建整洁的块状文本区域，提升可读性和专业感。：每行文本左右两端严格对齐容器边缘（类似报纸排版）。浏览器会自动调整单词/字符之间的间距，使文本的。：默认按左对齐处理（除非额外设置。），否则文本无分散空间。
css设置文字两端对齐text-align:justify不起作用的解决方法
weixin_45016440的博客
05-14 724
当使用text-align给元素设置对齐方式时，可以配置left、right、center使其居左、居右、居中对齐，如果想要两端对齐，设置属性为justify。但会发现，只有一行文字的时候，justify并没有生效，而多行文字时最后一行也还是居左显示。这样就可以实现元素中每一行都可以两端对齐显示。
css中text-align: justify；不生效问题的解决
zuo-yiran的博客
10-18 2395
text-align: justify;设置时未生效
css属性 text-align: justify无效的原因
qq_40156604的博客
05-28 4805
今天工作用到了这个属性，但发现不起作用，经过查询后发现是只对最后一行无效！也就是只有一行时，以及多行中的最后一行是无效的 解决方法 先给父级设置text-align: justify;，剩下的两个方法二选一 1.给文本之后再增加一个标签，使文本不再是最后一行 2.增加个伪元素 代码 效果 ...
使用text-align:justify实现两端对齐一例
10-30
text-align:justify是一种有效实现文本两端对齐的方法，尤其适用于多行文本。然而，在实际应用中，我们需要考虑到不同浏览器的兼容性问题，尤其是IE浏览器的特殊需求。此外，针对中文和英文的不同处理方式，我们可能...
text-align: justify;和text-align-last: justify;及text-align: justify-all;详解
02-26
的作用是让文本两端对齐，这在中文排版中常见，比如报纸或杂志，左右两边都对齐，看起来更整齐。这个属性会对齐除最后一行外的所有行，最后一行通常是左对齐的，这可能和语言的方向有关，比如在英文中，如果文本方向...
CSS教程:水平对齐(text-align)
12-04
- `justify`: 两端对齐，使文本在行首和行尾都接触边缘，通常用于大段文本，以保持视觉上的整洁。 初始值依赖于浏览器的默认设置，且这个属性在块级元素上有效，对行内元素如`<img>`，其效果可能会受到限制。 ### ...
火狐的text-align: justify属性无法使用问题
yrmth166的博客
03-30 275
今天写登录界面,使用两端对齐在火狐无法使用,百思不得其解,于是搜罗了一些解决办法,发现将。<html lang="en">的lang值由en改为zh即可。
css两端对齐不起作用?真正可用的CSS文字两端对齐
老蔡学代码
04-13 3392
最近在工作项目中接触到Web界面设计的问题，要实现文字两端对齐的效果。在网上搜索了一下，差不多都是互相转帖，用的都是类似的技巧： text-align:justify; text-justify:inter-ideograph; 但问题是，我怎么就看不到效果呢？无论是英文还是中文，在IE和chrome下都不起作用。后来，终于在StackOverflow上找到解决方法了。 CSS代码: ...
两端对齐css,两端对齐不起作用？网络上百度的解决方案
qq_36800701的博客
04-11 1897
两端对齐，有时候不起作用，不知道为啥，但是网上的方案是在标签后面加一个空白的标签，然后再设置样式 我这里用less做了一下“封装” // 两端对齐 .text-justify () { text-align: justify; &:after { content: " "; display: inline-block; width: 100%; ...
text-align:justify两端对齐失效问题说明
tian_xuewu的博客
07-31 2881
问题： text-align:justify在一段换行的文字中是可用的，但是在键值形式中，是无效的； 原因： justify对最后一行是无效的。对齐键值时，因为只有一行，也就是最后一行，所以无效果。 ex：姓名：王小小 解决办法： 增加一个空标签，让浏览器将文字默认为非最后一行即可： <div> <span class="contentName">姓名<i>&...
text-align-last: justify；文本对齐ios失效问题
qq_30856967的博客
09-19 3459
text-align: justify不生效的原因就是文字在最后一行，所以可以再想要两端对齐的文字前后分别加一个标签，然后把文字挤在不是最后一行的位置上。 加一个伪类元素隐藏解决 .title_name{ width: 100%; text-align: justify; text-align-last: center; -moz-text-align-last: center; margin-left: 10rpx; height: 100%; } .title_name:after { content:
css 实现文字两端对齐，对于text-align:justify无效的处理方法
weixin_kln的博客
07-03 1824
方式一： <div><span style="width: 100px;display:inline-block;text-align: justify;text-align-last: justify;">签字</span></div> 方式二： <div style="width:200px;text-align: justify;">签字<span style="display:inline-block;width:100%;"&gt
css两端对齐-justify不生效问题
Don't lost way
05-31 2045
参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/text-align 问题 遇到justify不生效的情况，往往是我们的文本只有一行导致的，但是文档明确的说了，justify对最后一行不生效，当你只有一行文本的时候，那么它也是最后 一行，所以不生效。 解决： 利用CSS伪元素::after用来创建一个伪元素，添加一行内容，并且将其隐藏，这样我们要显示的内容就不是最后一行了，justify就会生效。 <html> <head&gt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值