css两端对齐-justify不生效问题_justify-self无效

作者：笔触狂放9 | 2024-03-23 13:12:24

踩

justify-self无效

参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
在这里插入图片描述

问题

遇到justify不生效的情况，往往是我们的文本只有一行导致的，但是文档明确的说了，justify对最后一行不生效，当你只有一行文本的时候，那么它也是最后一行，所以不生效。

解决：

利用CSS伪元素::after用来创建一个伪元素，添加一行内容，并且将其隐藏，这样我们要显示的内容就不是最后一行了，justify就会生效。

<html>
<head>
<style>
.twoend span{
	display:block;
	width:100px;
	text-align:justify;
}
.twoend span:after {
  content:'';
  width: 100%;
  display: inline-block;
  overflow: hidden;
  height: 0;
}
</style>
</head>
<body>
<div class="twoend">
<span>申请人</span>
<span>被申请人</span>
<span>法定代表人</span>
</body>
</div>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/295361