关于单行文本设置text-align:justify无效的解决方法

吃葡萄不吐葡萄皮嘻嘻

已于 2023-01-06 10:38:12 修改

阅读量2.3k

点赞数 3

分类专栏： css 文章标签： css 前端

于 2023-01-06 10:28:52 首次发布

本文链接： https://blog.csdn.net/qq_45695853/article/details/128574482

版权

css 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

文章介绍了在CSS布局中遇到单行文本text-align:justify无效的问题时，可以采用添加text-align-last:justify属性或者利用伪元素（如::after）结合width:100%和display:inline-block来实现两端对齐。需要注意的是，伪元素方法可能会增加高度，但可以通过设置父元素高度来控制。

摘要由CSDN通过智能技术生成

效果图如下：

💐：解决单行文本设置text-align:justify不生效的方法如下两种：
1、添加 text-align-last: justify; 不会增加高度
2、添加伪元素,会导致高度增加，给父元素设置高度即可
xx::after{ width: 100%; content: ""; display: inline-block; }

`使用伪元素说明：`

    需要使用after，将伪元素放在需要两端对齐的元素后面，作为第二行；
    设定after的width为100%，生成第二行；
    设置为行内块元素，设置的width才有效。

常用场景如下图：

立减 ¥

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

text-align不生效问题

firewhitwind的博客

01-31

2万+

背景最近参与公司项目，做一个C端的产品，用webview，作为实习生，深刻体会到了C端的坑有辣么多，炒鸡多。问题描述目前有很多App都用了webview，但是…，webview还是有很多坑的，尤其是Android和ios之间存在的兼容性问题。其中就有text-align的问题。其实text-align: justify不生效的问题在web上面也存在，text-align: just

前端学习笔记 - 移动端Web开发

fengxm0309的博客

10-18

1074

移动端基础浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样兼容移动端主流浏览器，处理Webkit内核浏览器即可

参与评论您还未登录，请先登录后发表或查看评论

css 实现文字两端对齐，对于text-align:justify无效的处理方法

weixin_43758930的博客

07-03

1474

方式一： <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

html2Canvas text-align: justify 无效

最新发布

weixin_44240581的博客

06-27

121

html2Canvas text-align: justify 无效

css属性 text-align: justify无效的原因

qq_40156604的博客

05-28

4061

今天工作用到了这个属性，但发现不起作用，经过查询后发现是只对最后一行无效！也就是只有一行时，以及多行中的最后一行是无效的解决方法先给父级设置text-align: justify;，剩下的两个方法二选一 1.给文本之后再增加一个标签，使文本不再是最后一行 2.增加个伪元素代码效果 ...

css中text-align: justify；不生效问题的解决

zuo-yiran的博客

10-18

2189

text-align: justify;设置时未生效

text-align:justify无效解决办法

PromiseCao的博客

10-23

8376

text-align实现两端对齐文本效果，但是要特别注意text-align不会处理被打断的行和最后一行！如果你的文字只占了一行，同事它也是最后一行了，所以text-align设置为justify不会产生任何效果。解决方法是使用text-align-last，并将其设置为justify。不过不幸的是，text-align-last不是所有浏览器支持。所以对于不支持text-align-l...

【css样式】text-align: justify两端对齐失效

流萤梦的博客

05-27

3595

看到这篇文章就知道，我已经踩坑了，hhh，分享一下解决方案： text-align的属性，它控制的是行内内容如何相对它的父级元素对齐。关于text-align的其他取值这里就不再赘述了，主要说一下两端对齐的justify。需要注意的是text-align: justify对最后一行无效！！！既然是最后一行不生效，那解决方案很显然也是从最后一行入手咯！这里先放一个简单的例子： <div> <span>这是一个测试例子这是一个测试例子这是一个测试例子这是一个

使用text-align:justify实现两端对齐一例

10-30

本文主要讲述了使用CSS属性text-align:justify实现两端对齐的方法，并讨论了不同浏览器对中文和英文的理解和处理方式。一、text-align:justify的使用 text-align:justify是CSS中的一个属性，它可以使文本在一行中...

移动端真机ios适配问题以及移动端会出现的一些小问题

zhangsan777的博客

04-22

841

字体加粗 font-weight：bold； //要用blod/bloder/nomar等数字在真机上无效透明度 transport 在ios中不生效，直接用 rgba(52, 52, 52, 0)–透明代替 /系统默认菜单被禁用/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-hi...

居中图片和文字在同一行

丰的博客

05-21

2404

参考：http://www.cnblogs.com/thislbq/p/5882105.html 水平居中： 1. 行内元素：通过对父元素加 text-align:center （块级元素：自身加 text-align:center）行内只有这一种方法，如果要用以下方式可以display：block即可（text-align:center只对行内元素有效）（块级元素文本居中直接在块级元...

CSS面试题

qt的博客

02-06

395

盒模型组成是什么？，box-sizing有什么作用？盒模型：margin(外边距) padding(内边距) border(边框) content(内容) box-sizing:content-box /border-box / inherit有以下三个属性 1：content-box:指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度，元素的填充和边框布局和绘制指定宽度和高度除外. 2 ：border-box:指定宽度和高度（最小/最大属性）确定元素边框box，对元素指定宽度和高度

text-align:justify无效处理方式

Trifling_的博客

02-18

4922

原理：text-align只对最后一行之前的行生效，如果你只有一行则需特殊处理。 1、使用text-align-last，并将其设置为justify。text-align-last不是所有浏览器支持。 2、手动添加一行最为最后行，并将其隐藏。

text-align:justify两端对齐失效问题说明

tian_xuewu的博客

07-31

2743

问题： text-align:justify在一段换行的文字中是可用的，但是在键值形式中，是无效的；原因： justify对最后一行是无效的。对齐键值时，因为只有一行，也就是最后一行，所以无效果。 ex：姓名：王小小解决办法：增加一个空标签，让浏览器将文字默认为非最后一行即可： <div> <span class="contentName">姓名<i>&...

text-align:justify 两端对齐无效？

Bule_daze的博客

09-04

791

⚠️ text-align:justify 样式应用的最后一行文字不会生效（如果只有一行，那第一行同样是最后一行）可以通过使应用该样式部分不成为单行，在后面加点东西解决。 ???? 伪类解决方案： p.test { text-align: justify; } p.test:after { content: ""; display: inline-block; width: 100%; } <p class="test">只有一行很短的文字</p> text

text-algin:justify无效

Grueay的博客

07-07

原因：属性对最后一段文字无效解决：添加伪元素 { content:""; display:inline-block; width:100% } ...

CSS中的text-align不起作用

qq_31542611的博客

08-25

4726

css设置某个属性不生效问题

text-align属性到底对div起不起作用

qq_64775236的博客

03-23