css 在段落中对齐文本的跨距

pxy2qtax  于 2022-12-24  发布在  其他
关注(0)|答案(2)|浏览(153)

我有下面的HTML结构,在一个段落中有多个跨度:

<p><span>Hello</span><span>I</span><span>am</span>... </p>

问题是我无法证明该段的案文是正确的。
text-align: justify-不起作用。

jq6vz3qz

jq6vz3qz1#

您可以将段落设置为弹性框,并使用space-between模拟对齐。

p {
  display: flex;
  justify-content: space-between;
}
<p><span>Hello</span><span>I</span><span>am</span></p>
50pmv0ei

50pmv0ei2#

如果你想让它看起来像你在一个普通段落上得到的普通的对齐方式,那么你可以使用text-align:justify-在每个span上使用after伪元素放置空格:

p {
  text-align: justify;
}

span::after {
  content: ' ';
}
<p><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span>  </p>

相关问题